① 尚品汇的后台管理系统【尚硅谷】【Vue】

后台管理系统项目简介

1. 什么是后台管理系统项目？

   在前端领域当中，开发后台管理系统项目，并非是Java，PHP等后台语言项目

   在前面课程当中，我们已经开发了一个项目【尚品汇电商平台项目】，这个项目主要针对的是用户（游客），可以让用户在平台当中购买产品。

   但是你需要想明白一件事情，用户购买产品信息从何而来呀？

   比如：前台项目当中的数据来源于卖家（公司），但是需要注意的时候，卖家它不会数据库操作。对于卖家而言，需要把产品的信息上传于服务器，写入数据库。

   卖家并非程序员，不会数据库操作（增删改查）。导致卖家，找了一个程序员，开发一个产品，可以让我进行可视化操作数据库（增删改查）

   卖家（公司）组成：老板、员工。
   老板：开发这个项目，对于老板而言，什么都可以操作。【产品的上架、产品的下架、查看员工的个人业绩、其他等等】
   员工：可能就是查看个人业绩

2. 后台管理系统：可以让用户通过一个可视化工具，可以实现对于数据库进行增删改查的操作。
   而且需要注意，根据不同的角色（老板、员工），看到的、操作内容是不同的。

   对于后台管理系统项目，一般而言，是不需要注册的。

模板介绍

简洁版: https://github.com/PanJiaChen/vue-admin-template 我们用这个
加强版: https://github.com/PanJiaChen/vue-element-admin

1. 解压后发现文件夹里没有node_modules文件夹，我们需要安装依赖npm install

2. 然后我们运行一下---->去看他的package.json文件下"dev": "vue-cli-service serve",说明我们用dev来运行npm run dev

运行界面如下：

模板的文件与文件夹认知【简洁版】

build
----index.js 是webpack配置文件【很少修改这个文件】
mock
----mock数据的文件夹【模拟一些假的数据mockjs实现的】，因为咱们实际开发的时候，利用的是真是接口

node_modules
------项目依赖的模块

public
------ico图标,静态页面，public文件夹里面经常放置一些静态资源，而且在项目打包的时候webpack不会编译这个文件夹，原封不动的打包到dist文件夹里面

src
-----程序员源代码的地方
------api文件夹:涉及请求相关的
------assets文件夹：里面放置一些静态资源（一般共享的），放在aseets文件夹里面静态资源，在webpack打包的时候，会进行编译
------components文件夹：一般放置非路由组件获取全局组件
------icons 这个文件夹的里面放置了一些svg矢量图
------layout文件夹：他里面放置一些组件与混入
------router文件夹：与路由相关的
-----store文件夹：一定是与vuex相关的
-----style文件夹：与样式先关的
------utils文件夹：request.js 是axios二次封装文件⭐️
------views文件夹：里面放置的是路由组件

App.vue:根组件
main.js：入口文件
permission.js:与导航守卫先关、
settings：项目配置项文件
.env.development：开发环境的配置文件
.env.producation：生产环境的配置文件

后台管理系统API接口在线文档

http://39.98.123.211:8170/swagger-ui.html
http://39.98.123.211:8216/swagger-ui.html

最新后台文档swagger地址:
http://39.98.123.211:8510/swagger-ui.html#/

完成登录业务

1. 静态组件完成
2. 书写API（换成真实的接口）
3. axios二次封装
4. 换成真实接口之后需要解决代理跨域问题(解决代理跨域问题)

完成静态组件

修改里面的样式以及内容

这里修改了背景图片，以及把英文的都换成了中文

⚠️这里引入背景图片可以用@符号，但是前面要加~

另外把背景图片的大小调整为 100% 100%

.login-container {
   
  min-height: 100%;
  width: 100%;
  background: url(~@/assets/城堡.jpg);
  background-size: 100% 100%;
  overflow: hidden;

书写API（换成真实的接口）

这里之前登录的使用模拟的数据（mock），我们换成真实的接口

Swagger UI这里找接口

url改为接口里的url

//   src/api/user.js

// 对外暴露登录的接口函数
export function login(data) {
   
  return request({
   
    url: 'dev-api/admin/acl/index/login',
    method: 'post',
    data
  })
}
// 对外暴露获取用户信息的接口函数
export function getInfo(token) {
   
  return request({
   
    url: 'dev-api/admin/acl/index/info',
    method: 'get',
    params: {
    token }
  })
}
// 对外暴露退出登录的接口函数
export function logout() {
   
  return request({
   
    url: 'dev-api/admin/acl/index/logout',
    method: 'post'
  })
}

axios二次封装修改

这里我们的请求头携带的token字段

响应拦截器

我们换成了真实的接口，真实服务器返回的code ，有可能是20000，也有可能是200

解决代理跨域问题

开发中 Server(devServer) | webpack 中文网 (webpackjs.com)代理跨域

我们有两个端口号，一个是8170，一个是8510，所以我们可以设置多个代理跨域

我们这里的传递的是 /dev-api和dev-list，target地址也要修改

//    vue.config.js
    //  配置代理跨域
    proxy: {
   
      // 关于用户的接口
      "/dev-api": {
    
        target: "http://39.98.123.211:8170",
        pathRewrite: {
    "^/dev-api": "" }
      },
      // 关于品牌的接口
      "/dev-list": {
   
        target: "http://39.98.123.211:8510",
        pathRewrite: {
    "^/dev-list": "" }
      },
    }

⚠️修改完配置项，要重新启动项目

完成退出登录业务

完成静态组件

修改退出登录的样式和结构，将英文修改成中文的

书写API(换成真实的接口)

//   src/api/user.js
// 对外暴露退出登录的接口函数
export function logout() {
   
  return request({
   
    url: '/admin/acl/index/logout',
    method: 'post'
  })
}

路由的搭建

我们只需要首页，删掉其余不需要的路由文件夹，然后重新配置路由

我们的一级路由都是在Layout这个骨架下搭建的，所以一级路由的componen都写Layout

首页(一级路由)

权限管理(一级路由)

商品管理(一级路由)

​ -------品牌管理(二级路由)

​ ---- --平台属性管理(二级路由)

​ -------Spu管理(二级路由)

​ -------Sku管理(二级路由)

// src/router/index.js

  {
    // 一级路由
    path:'/product',
    component:Layout, // 在Layout的骨架下！！
    name:'Product',
    meta:{
   title:'商品管理',icon:'el-icon-goods'}, // // title是设置侧边栏的文字
    children:[
      // 二级路由
      {
   
        path:'trademark',
        name:'TradeMark',
        component:()=>import(