1文章详情页解决添加图片后宽度超出屏幕：添加max-width2英雄详情页3其他细节问题时间格式转化：安装工具dayjs:npmidayjs特殊意义的图标如><要用转义符

本专题文章共十篇，已完结，后续有补充会实时更新。 ps：注意，要批量向后台导入数据时要先在浏览器调用一下这个init接口，否则不会执行插入语句也就没有导入数据的效果。

1用ElementUI搭建基本的后台界面框架准备工作：在admin文件夹安装：vueaddelement​安装路由用于界面跳转：vueaddrouter左侧导航：在Main.vue中粘贴Element

1前端接口（admin）准备安装axios用于请求接口提交数据：npmiaxios在admin根目录新建http.js文件，在文件中引入axios在http.js中创建实例导出http变量在main.

1新增数据提交数据的基本步骤：前端在data()中定义model表单数据绑定model，model中的属性要和定义的该模型的字段相匹配通过save()函数同步提交数据路由接口2数据展示展示数据的基本步

上一章总结了项目中常用的CRUD操作和常见问题，但是由于一个个写不同内容的接口过于冗余，其功能大体上是一致的，所以需要将接口进行改造，转变为通用的CRUD接口。这样当前端请求不同种类的接口时可以根据模型的类型来进行转化与匹配，大大降低代码的重复度。

我们登陆页面的前端发送的请求都先经过我们的http拦截器，拦截器的写法参考axios官方文档。 参数解释：确保xxx存在；如果不存在，抛出状态码statusCode，返回错误信息message。之后我们想要使用assert替换里面所有需要判断状态码的地方 修改资源的相关路由，使…

在本系列第四篇文章中简单介绍了一下引入elementUI的图片上传组件，但是没有进行详细说明，本文将详细介绍如何上传图片。 直接复制文章内容通过富文本编辑器上传图片会导致图片资源嵌入到整个请求数据中，导致数据量过大，加载接口速度会非常慢。所以为了解决这个问题，我们对前端部分进行…

前面我们完成了后台管理界面的基本功能，接下来就需要完成移动端页面的搭建与数据的展示。移动端的搭建主要以旧版王者荣耀官网主页样式为模板，本文主要介绍前端搭建的流程与一些基本组件的使用。 卡片组件在移动端使用得非常频繁，我们可以根据需求自定义组件的封装，给其他卡片组件作为一个公共的…