vue项目总结

学习前端知识大概是三个月了吧，都是跟着b站的视频学的，学了基本三件套，然后学了vue框架，由于自己没有关于前端的项目经验，所以就在b站找了个项目跟着做，花了大概一个月时间做完了，也成功部署上线了。

码云地址：https://gitee.com/chen-mu-pmf/test2022.git​​​​​​

部署上线访问地址：电商后台管理系统 

其实做完之后有点陷入迷茫，没有收获的感觉，没有学习的踏实感，很多东西都只是走马观花，并未真正掌握，这个时候我无意间看到了一个up主的前端学习路线视频，里面提到，学完三件套不要着急去学框架，用组件库，多多练习一下css、js，先夯实好基础，这让我又不再迷茫了。我想自己心里不踏实的原因应该就是基础没打好，糊里糊涂地就过渡到了框架跟组件的应用，本末倒置了， 所以接下来是打算好好练习一下css跟js小案例了。但是毕竟花了一个月时间来做这个vue项目，总得有点收获，所以就写一个总结吧。

1.项目名称：电商后台管理系统

2.项目概述

2.1电商项目基本业务概述

电商系统一般提供了pc端、移动web、移动app、小程序等多种终端访问方式，电商系统的开发大致是以下形式：

 

它们都是共用同一个数据库和api接口服务器，而本项目则是pc后台管理系统，这个系统与其他的都不同，它不是服务于用户的，而是服务于商城管理员的。

2.2电商后台管理系统功能

 

2.3电商后台管理系统的开发模式

本系统整体采取前后端分离的开发模式，其中的前端是基于Vue技术栈的SPA项目。

前后端分离模式：后端负责操作数据库跟向前端暴露api接口，前端负责绘制界面和基于ajax调用后端提供api接口。简单来说就是，后端负责写接口，前端负责调用接口。

2.4电商后端管理系统的技术选型

2.4.1前端项目技术栈

1. Vue
2. Vue-router
3. Element-UI
4. Axios
5. Echarts

2.4.2后端项目技术栈

1. Node.js
2. Express
3. Jwt（状态保持工具，session登录记录）
4. Mysql
5. Sequelize（操作数据库的框架）
6. 3.项目初始化-编写环境配置

3.1前端环境配置

1.安装脚手架

使用npm全局安装即可，第一次安装的艰辛经历也有记录过了

2.通过脚手架创建项目

可以打开vue ui进行可视化的创建项目跟安装下面这些配置，也可以通过npm命令：npm create 文件夹名，在创建过程中会进行配置，可以直接配置路由

3.配置vue路由

4.配置element-ui库(插件）：按需导入模式

5.配置axios库（依赖）

6.初始化git仓库：创建项目的时候

7.将本地项目托管到github（国外）或码云（国内）

申请码云账号-设置码云账号-SSH公钥（看教程）(配置这个才可以上传操作仓库）-在码云中创建仓库-git全局配置用户名本地操作仓库git status（仓库状态）、git add .（添加本地文件）、git commit -m “add file”（提示消息）-推送到码云：git remote add origin 码云仓库链接-本地仓库跟远程码云仓库连接git push -u origin master

将代码提交到码云的操作

1. 新建一个项目终端,输入命令‘git status’查看修改过的与新增的文件内容
2. 将所有文件添加到暂存区：git add .
3. 将所有代码提交到本地仓库：git commit -m "添加登录功能以及/home的基本结构"
4. 查看分支： git branch  发现所有代码都被提交到了login分支
5. 将login分支代码合并到master主分支，先切换到master：git checkout master
6. 在master分支进行代码合并：git merge login
7. 将本地的master推送到远端的码云：git push
8. 推送本地的子分支到码云，先切换到子分支：git checkout 分支名
9. 然后推送到码云：git push -u origin 远端分支名

3.2后端环境配置

1. 安装mysql数据库：phpstudy管理
2. 安装node.js
3. 配置:npm install安装所有依赖项，node app.js 运行接口
4. 启动项目
5. Postman测试接口：api接口文档内的接口地址（由于用别人的服务器总会出现问题，所以就自己去阿里云搞了个免费体验一个月的服务器，然后配置成自己的接口地址）

4.编写代码

4.1登录退出功能

4.1.1登录业务相关技术点

使用http（http是无状态的）

通过cookie在客户端记录状态（不跨域）

通过session在服务端记录状态（部跨域）

通过token方式维持状态（跨域）：用户（客户端）输入用户名跟密码登录-服务器验证通过则生产该用户的token并返回-客户端存储token值，后续请求都携带token发送请求-服务器验证token是否通过然后返回相关数据

4.1.2页面绘制

Element-ui：el-form、el-form-item、el-input、el-button、字体图标

后续用到的elemment-ui组件有

主页面：el-container

 用户管理页面：el-select、el-switch、el-breadcrumb、el-card、el-table、el-tooltip

商品管理、订单管理页面：el-pagination、el-dialog、el-form、el-cascader、el-alert、el-steps、el-tabs、el-upload、el-checkbox-group、el-tag、el-tree、el-breadcrumb、el-card、el-table、tree-table、quill-editor（vue内置下载插件）

数据报表：cdn引入echarts

 4.1.3知识点

1. 一定要记住动态绑定属性前面要加：（v-on）
2. 路由占位符：，就是在这个区域插入新的页面跳转，后续的页面都是这个页面的子页面

Redirect:直接跳转界面

Children：页面里的子页面

Path：页面路径

Component：组件

路由钩子函数（导航守卫）

路由钩子函数 

//挂载路由导航守卫

router.beforeEach((to, from, next) => {

  if (to.path === '/login') {

    return next();

  }



  const tokenStr = window.sessionStorage.getItem('token');

  if (!tokenStr) {

    return next('/login');

  }

  next()

})

插槽 

3.深拷贝lodash 

// lodash cloneDeep(obj)

        const form = _.cloneDeep(this.addForm);

4.过滤器

//创建过滤器将秒数过滤为年月日，时分秒

//originVal传入的秒数，这里因为给出的是1970年的，所以需要处理一下

Vue.filter('dateFormat',function(originVal){

originVal=originVal*1000

  const dt = new Date(originVal)

  const y = dt.getFullYear()

  const m = (dt.getMonth()+1+'').padStart(2,'0')

  const d = (dt.getDate()+10+'').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}`

})

5.项目优化

实现步骤：

A.生成打包报告，根据报告优化项目

B.第三方库启用CDN

C.Element-UI组件按需加载（已实现）

D.路由懒加载

E.首页内容定制

（1）项目打包时设置externals节点不打包那些插件，从cdn引入打包，需要特别注意的是cdn引入的版本要与项目内的配置文件内的版本一致

config.set('externals', {

          'vue': 'Vue',

          'vue-router': 'VueRouter',

          axios: 'axios',

          moment: 'moment',

          lodash: '_',

          echarts: 'echarts',

          nprogress: 'NProgress',

          'vue-quill-editor': 'VueQuillEditor'

        })

(2)路由懒加载 

当路由被访问时才加载对应的路由文件，就是路由懒加载，按需加载路由

const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')

// import Login from './components/Login.vue'

(3)开启gzip压缩

下载npm i compression -D

打开app.js,编写代码：

const express = require('express')

const compression = require('compression')

const app = express()

app.use(compression())//启用中间件

app.use(express.static('./dist'))

app.listen(8888,()=>{

    console.log("server running at http://127.0.0.1")

})