一个后台管理（1.0）

1、创建项目

// 利用的是vue2 创建项目的方式
vue create u-mall-shop

2、下载项目依赖

npm install element-ui
npm install axios
npm install querystring

+ querystring@0.2.1
+ axios@0.27.2
+ element-ui@2.15.9

3、创建数据库

1. 创建数据库
2. 导入空表结构、
3. 修改服务端数据库的配置

exports.dbConfig = {
    host: 'localhost', //你自己的数据库主机名
    user: 'root', //安装mysql 用户名
    password: '123',//数据库密码
    port: 3306,//默认端口号（数据库）
    database: 'u_mall_shop' ,// 数据库名字
    timezone:"SYSTEM"
}

     4.启动服务器：npm start

4、初始化前端项目

5、启动前端项目：npm run serve

6、搭建基本项目目录

7、全局引入element-ui

//全局引入element-ui
import ElementUI from 'element-ui'
//全局引入css样式
import 'element-ui/lib/theme-chalk/index.css'
//调用插件
Vue.use(ElementUI)

8、创建基本组件并设置路由

 9、搭建登录的基本静态页

<template>
  <div>
    <!-- 
          Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可(prop必须和双向数据绑定的值一致)
          model	表单数据对象	object
          rules	表单验证规则    object
       -->
    <el-form
      :model="loginForm"
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item prop="username" label="用户名">
        <el-input v-model="loginForm.username" clearable></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="loginForm.password" clearable show-password></el-input></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        //登录表单
        username: "",
        password: "",
      },
      //验证规则
      rules: {
        username: [
          // required必须的 必传项
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        password: [
          // required必须的 必传项
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
      //封装一个登录事件
      login(){
          //获取表单节点并验证
          this.$refs.loginForm.validate(flag=>{
             if(flag){
                 console.log(this.loginForm,'表单对象');
                 //调用登录接口
                 //跳转到index页面
                 this.$router.push('/index')
             }else{
                 console.log('验证失败');
             }
          })
      }
  },
};
</script>

<style scoped></style>

10、搭建index的基本静态页

  大多数都是用element-ui组件

<template>
  <div>
    <!-- 搭建基本的布局 -->
    <el-container>
      <el-header> XXX大型后台管理系统 </el-header>
      <el-container>
        <el-aside width="240px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-co