vue项⽬电商后台管理系统（⼀）
###今⽇⽬标
1.初始化项⽬
2.基于Vue技术栈进⾏项⽬开发
3.使⽤Vue的第三⽅组件进⾏项⽬开发
4.理解前后端分离开发模式
###1.电商业务概述
客户使⽤的业务服务：PC端，⼩程序，移动web，移动app
管理员使⽤的业务服务：PC后台管理端。
PC后台管理端的功能：管理⽤户账号（登录，退出，⽤户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计
电商后台管理系统采⽤前后端分离的开发模式
前端项⽬是基于Vue的SPA（单页应⽤程序）项⽬
前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts
后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)
###2.项⽬初始化
vue element admin
A.安装Vue脚⼿架
B.通过脚⼿架创建项⽬
C.配置路由
D.配置Element-UI：在插件中安装，搜索vue-cli-plugin-element
E.配置Axios：在依赖中安装，搜索axios(运⾏依赖)
F.初始化git仓库
G.将本地项⽬托管到github或者码云中
###3.码云相关操作
A.注册登录码云账号
B.安装git 在Windows上使⽤Git，可以从Git官⽹直接下载安装程序进⾏安装。
测试命令：git --version
C.点击⽹站右上⾓“登录”，登录码云，并进⾏账号设置
D.在本地创建公钥：在终端运⾏：ssh-keygen -t rsa -C ""
E.到公钥地址： Your identification has been saved in /c/Users/My/.ssh/id_rsa. Your public key has been saved in /c/Users/My/.ssh/id_rsa.pub. 当我们创建公钥完毕之后，请注意打印出来的信息“Your p
ublic key has been saved in”/c/Users/My/.ssh/id_rsa.pub : c盘下⾯的Users下⾯的My下⾯的.ssh下⾯的id_rsa.pub就是我们创建好的公钥了
E.打开id_rsa.pub⽂件，复制⽂件中的所有代码，点击码云中的SSH公钥，将⽣成的公钥复制到公钥中
G.测试公钥：打开终端，输⼊命令 ssh -T
H.将本地代码托管到码云中 点击码云右上⾓的+号->新建仓库
I.进⾏git配置：
打开项⽬所在位置的终端，进⾏git仓库关联
###4.配置后台项⽬ A.安装phpStudy并导⼊mysql数据库数据
B.安装nodeJS，配置后台项⽬，从终端打开后台项⽬vue_api_server 然后在终端中输⼊命令安装项⽬依赖包：npm install
C.使⽤postman测试api接⼝
###5.实现登录功能 A.登录状态保持 如果服务器和客户端同源，建议可以使⽤cookie或者session来保持登录状态 如果客户端和服务器跨域了，建议使⽤token进⾏维持登录状态。
B.登录逻辑： 在登录页⾯输⼊账号和密码进⾏登录，将数据发送给服务器 服务器返回登录的结果，登录成功则返回数据中带有token 客户端得到token并进⾏保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证⽤户⾝份。
C.添加新分⽀login，在login分⽀中开发当前项⽬vue_shop： 打开vue_shop终端，使⽤git status确定当前项⽬状态。 确定当前⼯作⽬录是⼲净的之后，创建⼀个分⽀进⾏开发，开发完毕之后将其合并到master git checkout -b login 然后查看新创建的分⽀：git branch 确定我们正在使⽤login分⽀进⾏开发
然后执⾏vue ui命令打开ui界⾯，然后运⾏serve，运⾏app查看当前项⽬效果
发现现在是⼀个默认页⾯，我们需要进⾏更改，打开项⽬的src⽬录，点击main.js⽂件（⼊⼝⽂件）
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
再打开App.vue(根组件)，将根组件的内容进⾏操作梳理(template中留下根节点，script中留下默认导出，去掉组件，style中去掉所有样式)
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
再打开router.js(路由)，将routes数组中的路由规则清除，然后将views删除，将components中的helloworld.vue删除

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。