迪丽热-BUG

Element IMS 实训日志

1.1 项目说明

使用express，node.js为后台部分，vue为前台部分。实现一个后台登陆的发布系统，包含文章创建，文章修改，分类修改，删除等～

第一天任务

  1. 环境搭建 （express + vue）
  2. 配置路由

创建项目

cd desktop
express vue-element-admin	
cd vue-element-admin
vue create admin
1
2
3
4

创建vue项目配置

​ 1.默认选择或自定义 按下键选择第二个回车

  1. Vue CLI v3.8.2
┌───────────────────────────┐
│  Update available: 3.9.2  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
❯ Manually select features 
  default (babel, eslint)
    1
    2
    3
    4
    5
    6
    7
    1. 选择安装等插件
  2. Vue CLI v3.8.2
┌───────────────────────────┐
│  Update available: 3.9.2  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
❯◯ Unit Testing
 ◯ E2E Testing
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    3.是否使用history

  3. ? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) yes
    1
    2

    4.预处理器选择

    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): 
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
❯ Less 
  Stylus
    1
    2
    3
    4
    5
    6

    5.各大厂的规范标准选择

    ? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier
    1
    2
    3
    4
    5

    6.什么时候检查错误

    ? Pick additional lint features: 
 ◉ Lint on save
❯◉ Lint and fix on commit
    1
    2
    3

    7.插件什么的安装在什么地方

    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files 
  In package.json
    1
    2
    3
    4

    8.是否保存本次配置

    yes
    1

安装element插件

cd admin
vue add element
1
2

路由配置

路由文件放在src下的rotues文件下，创建路由时需要把路由的页面引入

import	name form	./../views/name.vue'
1

路由格式

{
  path: '/',
  name: 'Name',
  component: Name
},
1
2
3
4
5

第二天任务

  1. 页面样式
  2. 编写API

在上面已经安装过element插件可以直接使用

配置登陆页，文章列表，创建文章，编辑文章，文章管理页，用户管理页，使用element堆砌即可

编写API

任务的要求是方法和api分离这样更容易维护和修改所以需要在后台创建一个controller文件放置方法文件

请求格式

router.get('/跳转地址',方法文件.调用方法名);	//获取
router.post('/跳转地址',方法文件.调用方法名);	//发送（对内容大小无限制）
router.put('/跳转地址/:id',方法文件.调用方法名);	//发送
router.delete('/跳转地址/:id',方法文件.调用方法名);	//删除
1
2
3
4

根据页面的逻辑进行创建

创建页面需要创建内容所以需要post内容，因为里面的分类是数据渲染的所以也需要get请求数据

文章列表页需要获取数据库内容进行渲染所以需要请求数据进行渲染

编辑页因为每一篇文章都是独立的所以他们有动态的跳转id和创建页面的方法类似使用put请求发送到服务器

同理分类管理也是大同小异

第三天任务

连接数据库，在后台models层中使用knex操作数据库的表单

npm install knex --save
1

knex的主要目标环境是node，可以在Node.JS和浏览器中用作SQL查询构建器

初始化config

const configs = {
    mysql: {
      host: '127.0.0.1',
      port: '3306',
      user: 'root',
      password: '',
      database: 'vue-element-admin' //表名称
    }
  }
  module.exports = configs
1
2
3
4
5
6
7
8
9
10
11

在后台models层使用knex

创建一个base放置公用属性里面方法的连接和jquery相识''链式''

新建models/knex.js

// 引用配置文件
const configs = require('../config');
// 把配置文件中的信息，设置在初始化配置中
module.exports = require('knex')({
  client: 'mysql',
  connection: {
    host: configs.mysql.host,
    port: configs.mysql.port,
    user: configs.mysql.user,
    password: configs.mysql.password,
    database: configs.mysql.database
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

建立models/basejs放置基础文件

//全部	选择所有
    all(){return knex(this.table).select();}
//选择	
    select(params){return knex(this.table).select().where(params)}
//创建 传入params把创建的数据传入
    insert(params){return knex(this.table).insert(params)}
//更改根据传入的ID更新对应的文章
    updata(id,params){return knex(this.table).where('id','=',id).update(params)}
//删除 根据传入的id删除对应的文章等
    delete(id){return knex(this.table).where('id' , '=' , id).del()}
1
2
3
4
5
6
7
8
9
10

创建article，classify，user并引入knex文件

const Knex = require('./knex');
const Base = require('./base');

class Classify extends Base {
    constructor(prop = 'classify'){
        super(prop);
    }
}
1
2
3
4
5
6
7
8

← Mercedes-admin后台实训项目 →