基于Vue3.0的电商后台管理系统---前端

历时一个月,从开始学习vue到能用vue开发一个简单的系统,以下是开发这个系统的简单报告。

所用的技术:

git:管理代码的开发
node.js:vue.js运行环境
vue3.0:最新版本
vue-cli3.0:脚手架最新版本,支持图形化操作
webstorm:代码编辑器

项目新增插件:

vue-cli-plugin-element:element UI库

项目新增的依赖:

运行依赖:
echarts:画图工具,画统计图用的
element-ui
vue-table-with=tree-grid:树状结构的UI库

开发依赖:
less、less-loader:使css样式只在当前组件里生效

eslinttr我新增禁止检查的命令:

'indent': 0,
'quotes': 0,
'quote-props': 0,
'no-unused-vars': 0

对时间显示的处理

// originVal:单位需要是毫秒
Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

路由的设计

routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', component: Welcome },
        { path: '/users', component: Users },
        { path: '/rights', component: Rights },
        { path: '/roles', component: Roles },
        { path: '/cate', component: Cate },
        { path: '/params', component: Params },
        { path: '/goods', component: GoodsList },
        { path: '/goods/add', component: Add },
        { path: '/orders', component: Order },
        { path: '/reports', component: Report }
      ]
    }
  ]

 

系统展示:

 

<p> <span style="background-color:#FFE500;color:#000000;font-size:14px;"><b>【超实用课程内容】</b></span> </p> <ul> <li> <span style="color:#000000;font-size:14px;">通过对一个经典后台管理页面的创建和增删查改内容的讲解,把</span><span style="color:#000000;font-size:14px;">vuejs框架的关键知识点都穿插讲到。</span> </li> <li> <span style="color:#000000;font-size:14px;">包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件使用,数据传递的各种方式,前端如何模拟数据,以及如何与后端接口联调等等。</span> </li> <li> <span style="color:#000000;font-size:14px;">为了让大家能构造出一个规范、安全的前端系统,课程的最后还介绍了防xss攻击的一些注意事项和代码规范等内容。</span> </li> </ul> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b><br /> </b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b>【课程如何观看?】</b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;"><span style="color:#000000;">PC端:</span><a href="https://edu.csdn.net/course/detail/26277"><span style="color:#000000;">https://edu.csdn.net/course/detail/26277</span></a></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">移动端:CSDN 学院APP</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">本课程为录播课,课程永久有效观看时长,但是大家可以抓紧时间学习后一起讨论哦~</span> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="line-height:24px;color:#000000;font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span> </p>
相关推荐
<p> <span style="color:#333333;"><strong></strong></span> </p> <span style="font-size:24px;">一、简介</span> <p> <span style="font-size:12px;"></span> </p> <p> <span style="font-size:16px;">通过这个课程带大家从零开发一款功能全面的后台管理系统,包括项目搭建、功能实现到最后的Linux系统部署全过程。本课程使用SpringMVC + Spring + Mybatis作为主体框架,使用AdminLTE作为前端框架,使用主流关系型数据库Mysql作为存储数据库,使用非关系型数据库Redis作为缓存数据库,并集成SpringSecuriy安全框架做权限的动态管理,集成Swagger2自动生成接口文档,集成Druid连接池进行SQL性能监控,集成ActiveMQ消息中间件进行异步解耦,提高性能。最后使用linux系统进行服务部署,并搭建nginx反向代理服务器提高网站性能。</span> </p> <p> <br /> </p> <p> <span style="font-size:24px;"><strong>二、学习目标</strong></span> </p> <p> <span style="font-size:16px;">通过本课程的学习带大家掌握SSM框架的开发流程,并熟练使用SpringSecurity做为安全框架进行权限管理,整合相关优秀的开源框架进行功能开发。还在项目中带大家学习前端相关的Jquery、Bootstrap等知识。课程结束之后希望大家能做到独立进行开发项目的目的,增强解决问题的能力,具备功能落地实现的能力。</span> </p> <p> <span style="font-size:16px;"><span style="font-size:24px;"><strong>三、课程涉及知识点</strong></span></span> </p> <p> <span style="font-size:16px;"></span> </p> <ul> <li> SpringMVC源码分析 </li> <li> Mybatis源码分析 </li> <li> 通用Mapper </li> <li> Mysql数据库 </li> <li> Redis缓存实现 </li> <li> ActiveMQ消息中间件 </li> <li> SpringSecurity鉴权 </li> <li> Swagger2接口文档生成 </li> <li> 自定义注解 </li> <li> AOP切面编程 </li> <li> 自定义过滤器 </li> <li> Logback日志整合 </li> <li> Druid性能监控 </li> <li> Linux系统 </li> <li> Nginx反向代理 </li> <li> Ajax异步请求技术 </li> <li> Jquery基本使用 </li> <li> AdminLTE前端框架 </li> <li> Chart图表-线状图和饼状图 </li> <li> 百度地图定位城市 </li> <li> BootStrap前端框架 </li> <li> BootStrap-Table插件 </li> <li> BootStrap-Treeview插件 </li> <li> Markdown编辑器 </li> <li> 403、404、500错误页面配置 </li> <li> 数据库事务 </li> <li> 消息提示插件toastr.js </li> <li> 图片上传插件bootstrap fileinput </li> <li> 数字滚动效果 </li> <li> pv/uv流量统计 </li> <li> ... </li> </ul> <p> <br /> </p> <p> <span style="font-size:16px;"><span style="font-size:24px;"><strong>四、</strong></span><span style="font-size:24px;"><strong>课程部分内容截图如下</strong></span><span style="font-size:24px;"><strong></strong></span></span> </p> <p> <span style="font-size:18px;"><span style="font-size:18px;"><strong>1、首页</strong></span></span> </p> <p> <span style="font-size:16px;"><span style="font-size:24px;"><strong><span></span><span><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kcmVhbWxhbmQud2FuZy9pbWFnZXMvaW1hZ2UvMjAxOTA5MTkvMjAxOTA5MTkxMTE1MTJfMTM5LnBuZw?x-oss-process=image/format,png" /></span></strong></span></span> </p> <p> <span style="font-size:24px;"><span style="font-size:24px;"><strong><span style="font-size:24px;">2、菜单管理</span></strong></span></span> </p> <p> <span style="font-size:24px;"><span style="font-size:24px;"><strong><span style="font-size:24px;"><span></span><span><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kcmVhbWxhbmQud2FuZy9pbWFnZXMvaW1hZ2UvMjAxOTA5MTkvMjAxOTA5MTkxMTE3MjBfNzE5LnBuZw?x-oss-process=image/format,png" /></span><br /> </span></strong></span></span> </p> <p> <span></span> </p> <p> <span><span style="font-size:24px;"><strong>3、图床管理</strong></span><span style="font-size:24px;"><strong></strong></span><br /> </span> </p> <p> <span><span style="font-size:24px;"><strong><span></span><span><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kcmVhbWxhbmQud2FuZy9pbWFnZXMvaW1hZ2UvMjAxOTA5MTkvMjAxOTA5MTkxMTIwMTJfNjYwLnBuZw?x-oss-process=image/format,png" /><span></span></span><span></span><br /> </strong></span></span> </p> <p> <span><span style="font-size:24px;"><strong>4、图标管理<br /> </strong></span></span> </p> <p> <span><span style="font-size:24px;"><strong><span></span><span><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kcmVhbWxhbmQud2FuZy9pbWFnZXMvaW1hZ2UvMjAxOTA5MTkvMjAxOTA5MTkxMTIxMDBfMTcucG5n?x-oss-process=image/format,png" /><span></span></span><span></span></strong></span></span> </p> <p> <span><span style="font-size:24px;"><strong>5、留言反馈管理<br /> </strong></span></span> </p> <p> <span><span style="font-size:24px;"><strong><span></span><span><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kcmVhbWxhbmQud2FuZy9pbWFnZXMvaW1hZ2UvMjAxOTA5MjEvMjAxOTA5MjExMDEwMTJfMzQ2LnBuZw?x-oss-process=image/format,png" /><span></span></span><span></span></strong></span></span> </p> <p> <span><span style="font-size:24px;"><strong>6、druid监控<br /> </strong></span></span> </p> <p> <span></span><span><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kcmVhbWxhbmQud2FuZy9pbWFnZXMvaW1hZ2UvMjAxOTA5MTkvMjAxOTA5MTkxMTIzMzVfNTgwLnBuZw?x-oss-process=image/format,png" /></span> </p> <p> <br /> </p> <p> <span style="font-size:24px;"><strong></strong></span><span style="font-size:24px;"><strong>7、登录日志</strong></span><span style="font-size:24px;"><strong></strong></span> </p> <p> <span style="font-size:24px;"><strong><span></span><span><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kcmVhbWxhbmQud2FuZy9pbWFnZXMvaW1hZ2UvMjAxOTA5MTkvMjAxOTA5MTkxMTI0MzJfOTQyLnBuZw?x-oss-process=image/format,png" /><span></span></span><span></span><br /> </strong></span> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页