简介

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

注意：前端领域当中，开发后台管理系统项目，并非是java、php等后台语言项目。

【尚品汇电商平台项目】，这个项目主要针对的是用户（游客），可以让用户在平台当中购买产品。
但是你需要想明白一件事情，用户购买产品信息从何而来呀？

比如：前台项目当中的数据来源于卖家（公司），但是需要注意的时候，卖家它不会数据库操作。对于卖家而言，需要把产品的信息上传于服务器，写入数据库。
卖家并非程序员，不会数据库操作（增删改查）。导致卖家，找了一个程序员，开发一个产品，可以让我进行可视化操作数据库（增伤改查）

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

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

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

模板

简洁版: https://github.com/PanJiaChen/vue-admin-template
加强版: https://github.com/PanJiaChen/vue-element-admin
模板的文件与文件夹认知【简洁版】

下载文件并解压

打开文件夹发现，他缺少npm的包,那我们就npm i 下载包就可以了

如果要运行这个文件，我们需要在配置文件中找他开启服务器的命令，例如这个就是

npm run dev

看一下这个界面

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

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

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

public
------ico图标,静态页面，publick文件夹里面经常放置一些静态资源，而且在项目打包的时候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

登录业务完成

登录静态组件先完成

就是修改这个界面的ui

el-form组件：element-ui插件里面的一个组件，经常展示表单元素 model:用于收集表单数据 rules:表单验证规则

修改它的背景图

现在实现登录的业务

如果觉得写的比较难受可以换成我们之前的写法

async login({ commit }, userInfo) {
    //解构出用户名与密码
    const { username, password } = userInfo;
    let result = await login({ username: username.trim(), password: password });
    //注意：当前登录请求现在使用mock数据，mock数据code是20000
    if(result.code==20000){
      //vuex存储token
      commit('SET_TOKEN',result.data.token);
      //本地持久化存储token
      setToken(result.data.token);
      return 'ok';
    }else{
      return Promise.reject(new Error('faile'));
    }
  },

2.书写api(换成真实的接口)

后台管理系统API接口在线文档：
http://39.98.123.211:8170/swagger-ui.html
http://39.98.123.211:8216/swagger-ui.html

到这里换成我们真实的数据的接口

第三步就是看axios的二次封装，毕竟这个不是我们自己写的

然后发现包的错误是这个

这个是因为我们没有解决跨域问题，也就是换成真实的接口后需要解决跨域问题

DevServer | webpack 中文文档 | webpack 中文文档 | webpack 中文网 (webpackjs.com)

去官网复制到页面当中，这里有一个注意点，那就我们需要修改'/api' ,要跟.env.development中的名称一样

这里有一个注意点，一定要加上端口号，否则，老师的接口是没有权限的

 proxy: {
      '/dev-api': {
        target: 'http://39.98.123.211:8170',
        pathRewrite: { '^/dev-api': '' },
      },
    },

退出登录

把退出改成中文

后台管理系统:简介与登录退出

简介

模板

登录业务完成

退出登录

猜你喜欢