vue2

电商后台管理系统的功能

电商后台管理系统的开发模式（前后端分离）

电商后台管理模式整体采用前后端分离的开发模式，其中前端项目是基于Vue技术栈的SPA项目

项目初始化

修改代理加快速度

修改npm代理加快连接速度

npm config set registry https://registry.npm.taobao.org

前端项目初始化步骤

1.安装脚手架

先卸载原有Vue，更新版本

npm uninstall vue-cli -g

npm命令通过安装Node.js包就可获得

再重新安装使用

npm install @vue/cli -g 

2.通过Vue脚手架创建项目/3.配置Vue路由

可视化创建

访问localhost:8000,得到以下页面，此页面用于可视化创建项目

vue项目基本信息填写

点击创建，自己选择Vue项目的存储路径

点击最下方创建新项目

预设可根据自己的需求进行选择，这里选择手动的方式

功能安装

功能可根据自己需求选择性安装

Bable功能为必须安装的选项，使用配置文件为强烈推荐安装的选项,eslint初学者可选择不安装

配置

保存预设

4.添加插件

element-ui

5.配置axios库

axios库支持在项目中发送网络请求

6.初始化git远程仓库/7.将本地项目部署到github中

详情参考本博客github篇

7.使用新的分支

开发一个新的功能建议使用新的分支，如登录功能

8.项目预览

或使用命令在该项目文件的根目录下运行以下命令

npm install
npm run serve

9.寻找入口点

整个vue-cli项目的入口点在src->main.js文件，初始化为以下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App) //将App根组件渲染到页面上，第8步种预览的页面即为App根组件的内容
}).$mount('#app')

json-server

搭建本地数据接口，创建json文件，便于前端调试调用。当后端接口还未开发结束时，前端可以使用json-server模拟后端API调用，获取动态数据对前端进行调试。

1. 安装

全局安装json-server

npm install -g json-server

2. 创建一个db.json的文件

first/second/third代表三张表，表里的是属于这张表的每一条记录

{
    "first":[
        {"id":1,"name":"zby","age":21}
    ],
    "second":[
        {"id":2,"name":"bzy","age":17}
    ],
    "third":[
        {"id":3,"name":"yzb","age":18}
    ]
}

任意寻找一个路径存放db.json文件即可，建议存放在前端项目的文件夹中

3. 开启JSON服务

在2步中存放db.json的文件目录下打开cmd,执行以下命令

json-server --watch db.json

–watch是监听db.json的改动，进而更新服务器数据

访问对应的url即可获得该表的信息：

4.增加表中数据

增加表中数据可以通过直接修改db.json文件或使用Post请求进行添加

登录/退出功能

登录概述

登录业务流程

• ①在登录页面输入用户名和密码
• ②调用后台接口进行验证
• ③通过验证后，根据后台的响应状态跳转到项目主页

登录业务技术点

• http是无状态的
• 通过cookie在客户端记录状态
• 通过session在服务器端记录状态
• 通过tooken方式维持状态

有两种记录状态的方式，第一种是结合cookie和session,第二种是tooken；如果前后端之间存在跨域问题，使用tooken方式，否则使用cookie结合session。

登录-token原理分析

登录功能的实现

项目梳理

1.梳理根组件

将App.vue中的相关内容进行清空，最终为以下状态

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>
<style>
</style>

2.梳理路由

将src->router->index.js(router.js)文件相关内容进行清空，最终为以下状态

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({
  routes
})

export default router

3.删除无用文件

将components->HelloWorld.vue，以及views->About.vue/Home.vue删除

渲染login组件并实现重定向

1. 新建components->login.vue文件

其中style要加上scoped关键字，scoped表示当前样式只在当前组件中生效

<template>
</template>

<script>
</script>

<style src="css文件位置" scoped></style>

scoped只对当前域有效，除index.html的文件外，.vue文件生成的html文件并没有body，所以不会对body节点生效

2. 路由规则

打开router->index.js文件，写入路由规则

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' 

Vue.use(VueRouter)

const routes = [
    { path:'/', redirect: Login},  //重定向，用户访问/时重定向至Login组件
    { path: '/login',component: Login} //当用户访问/login时，展示Login组件 
]
const router = new VueRouter({
  routes
})

export default router

5. 在根组件中放路由占位符

在App.vue文件中添加占位符

<template>
    <router-view></router-view> <!--通过路由匹配到的组件都会被渲染到此处-->

</template>

<script>
    export default {
        name:'app'
    }
</script>

<style>
</style>

表单数据绑定

<template>
<form :model="loginForm">
    <input v-model="loginForm.username">  <!--用户名-->
    <input v-model="loginForm.password">  <!--密码-->
    </form>
</template>
<script>
export default{
    data(){
        return{
            //登录表单绑定的数据对象
        loginForm:{username:'', password:''}
    }
    }
}
</script>

v-model通常用于input的双向数据绑定，也可以实现子组件到父组件数据的双向数据绑定

:model是v-bind:model的缩写,这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。

数据验证

<template>
<form :model="loginForm" :rules="loginRules">
    <item prop="username">用户名
    <input v-model="loginForm.username" >  <!--用户名-->
    </item>
    <item prop="password">密码
    <input v-model="loginForm.password">  <!--密码-->
    </item>
    </form>
</template>
<script>
export default{
    data(){
        return{
            //登录表单绑定的数据对象
        loginForm:{username:'', password:''},
            //rules对象中的每一个数组就是一个验证对象，数组里的每一条记录对应验证对象的一条规则 
        loginRules:{
            //验证用户名是否合法
            username:[
            //规则①：required为true时代表必填项，message为不符合规则时显示的内容，blur指定鼠标失去焦点时触发验证行为
            {required: true, message: '请输入用户名', trigger: 'blur'},
            //规则②：规定用户名长度
            {min: 3, max: 5, message: '长度为3-5个字符', trriger:'blur'},
        ],
        //验证密码是否合法
        password:[
            {}
        ]
        }  
    }
    }
}
</script>

提交表单

表单的引用

<el-form ref="ruleForm"></el-form>  <!--ref属性值为表单的引用-->

为登录按钮绑定事件

<el-button  @click="login">登录</el-button>

利用axios发起登录请求

配置axios

main.js

全局配置

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000' //配置请求的根路径
Vue.prototype.$http = axios  //每一个vue组件都可以通过this.$http发起请求

登录事件的函数处理()

  login(){
          this.$refs.ruleForm.validate(async valid => {
              if (!valid) return;
             const result = await this.$http.post('ip',this.ruleForm); //first为请求地址，this.ruleForm为表单绑定数据(username,password)，请求参数可直接写json也可使用对象
             console.log(result); 

          });
      },

存储token

 window.sessionStorage.setItem("token",this.token); //存储token

存储的token可在浏览器控制台application->sessionStorage查看

组件之间跳转

router-link渲染

<router-link :to="{path: '/login'}" class="">登录</router-link>  <!--router-link默认渲染为带有正确链接的a标签，此处为渲染到/login路由所指向的组件-->

点击事件触发(带参数)

<button @click="goLogin">登录</button>
<script>
    export default{
        methods:{
            goLogin:function(){
                this.$router.push({path: '/login',query:{id:id}})  //跳转到/login路由所指的路由,query传递参数,会暴露在url中
            }
        }
    }
</script>

接收参数

this.$route.query.id

路由导航守卫控制访问权限

如果用户没有登录，但是直接通过url访问特定页面，需要重新导航到登录页面。

router/index.js

//挂载路由导航守卫
router.beforeEach((to,from,next)=>{
    //to表示将要访问的路径
    //from 代表从哪个路径跳转而来
    //next 是一个函数，表示放行
    if((to.path == '/login')||(to.path == '/')||(to.path == '/test')||(to.path =='/customer')){
        return next();
        }  //如果访问login /直接放行
        else{
            const tokenStr = window.sessionStorage.getItem('token');  //获取token
            // console.log("token",tokenStr);
            if(!tokenStr){
                return next('/login'); //强制跳转/login页
            }else{
                next();
            }
        }


})

退出

退出只需销毁本地的token即可

window.sessionStorage.clear() //清空token
this.$router.push({path:'/login'})  //回到登录页

登录后获取数据

后端设计所有请求头必须使用 Authorization 字段提供的 token 令牌

通过接口获取数据

通过axios请求拦截器添加token，保证拥有获取数据的权限。

main.js

//config为请求对象
axios.interceptors.request.use(config=>{
    config.headers.Authorization = window.sessionStorage.getItem('token');
    return config  //固定写法
})

请求数据

在axios配置为$http的情况下（参考上文）

async logout(){
                const result = await this.$http.get('logout',{username:'zby'}); //(路由,消息体)

后端获取数据

python

body = str(request.body,encoding='utf-8')
bodyJson = json.loads(body)  //要对body进行非空处理，否则会出错
username = bodyJson.get('username')

Vue使用补充

Vue中全局引入element-ui

npm install element-ui -S

main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);