vue小项目

电商

业务描述

多端

客户使用的业务服务：PC端，小程序，移动web，移动app

电商后台

管理员使用的业务服务：PC后台管理端
PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分
类参数，商品信息，订单），数据统计

开发模式

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

• 前端项目是基于Vue的SPA（单页应用程序）项目
• 前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts
• 后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)

启动后台项目

进入 vue-api-server 目录，运行如下命令，进行恢复安装

npm install

新建数据库 shop_admin，找到 db 目录下的 shop_admin.sql ,将数据导入
查看 config 目录下的 default.json ，修改数据库配置信息与你的数据库一致
运行如下命令，启动后台项目

node app.js

测试
http://127.0.0.1:8888/api/private/v1/goods

项目初始化

步骤如下

1.码云创建仓库

2.本地创建项目

vue create vue-shop

3.使用git把项目推送到远程仓库

命令	说明
mkdir shop-vue	创建文件
cd shop-vue	打开文件
git init	初始化
touch README . md	新建README
git add README . md	提交到暂存区
git commit -m “first commit”	提交更改
git remote add origin git@gitee . com: dqtc/shop-vue. git	远程仓库
git push -u origin master	推送到远程

注意：远程仓库谁和谁的都不一样，不要随便复制

4.配置Element-UI

安装

npm i element-ui -S

-S表示 --save

项目引入

完整引入
在 main.js 中写入以下内容：

import : Vue from ，' vue
import App from ，' . /App.vue 
import : router : from ' . /router 
import- store from : ' ./store
import。ElementUI from . ' element-ui
import ' element-ui/lib/ theme -chalk/ index . css '
Vue . use(ElementUI )
Vue . config . productionTip = false
new. Vue({
router,
store,
render: h => h(App)
}) . $mount( #app' )

按需引入：
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

5.配置axios

$ npm install axios

还想了解相关知识点请点击

6 删除组件和视图

vue中有一些自带的示例组件是可以删除的，比如：
删除 src 目录下的 views 目录 中的 Home.vue 和 About.vue
删除 components 目录中的 HelloWorld.vue

7.代码格式校验

因为安装了 ESLint，保存代码时，会按照 eslint 规范进行代码检查，如分号、双引号、空格等

稍有不慎，就无法通过校验，导致打包失败

解决方案

安装ESLint 扩展

{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
// 添加 vue 支持
"eslint.validate": [
 "javascript",
 "javascriptreact",
 "vue"
],
//  #让函数(名)和后面的括号之间加个空格 不加空格false
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_attributes": "force-aligned"
  // #vue组件中html代码格式化样式
 }
},
"window.zoomLevel": 0,
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
},
"editor.fontSize": 18
}

登录

1.登录逻辑

在登录页面输入账号和密码进行登录，将数据发送给服务器

服务器返回登录的结果

登录成功则返回数据

数据中带有token，客户端得到token并进行保存，后续的请求都需要将此token送给服务器，服务器会验证token以保证用户身份

登录失败，则在前端提示错误信

２.创建新分支login

在login分支中开发当前项目
在vs code 中打开终端，使用git status确定当前项目状态,
确定当前工作目录是干净的之后，创建一个分支进行开发，
然后查看新创建的分支：

git branch

开发完毕之后将其合并到master

git checkout -b login

注意：写的时候要确定一下是否在login分支下

3.修改根组件

修改App.vue(根组件)，只留下路由出口

<template>