Vue-Axios 后台管理系统 项目 练习 总结 中……

---

前言

ヽ(✿ﾟ▽ﾟ)ノ

现在是2022年的9月28日，
毕业之后的我了解到了公司的一些开发技术，在学校里接触不多甚至几乎没有当然是处处碰壁，
但在其中也是学到了一点东西，可无法灵活的运用
关于前后端交互这块，陌生的就像第一次吃螃蟹
于是 在临近国庆期间 我便在网上找了一些Vue axios的实战项目来析毫剖厘
希望自己的技术能得到一些提升。

---

商城后台管理系统_日志

一、需要安装的环境

直接npm i +‘名字’

官方文档：
axios：官网
elementui：官网

---

二、项目文件夹结构

目前的了解

>database

是配置的数据库，我使用的是Wampserver32进行配置。

>dist

执行npm run build 打包的项目。

>node_modules

安装的各种依赖。

>public

公用文件。这里的UEditor是一个富文本编辑器就像写评论的那个效果。

>server

连接数据库，配置一些页面接口。
upload里存放的是上到数据库的文件。
config.js是配置文件。
index.js写了跨域的一些内容。
mysql.js是连接的数据库。
router.js是路由跳转用于控制判断是否为数据库里的数据，例如登录判断。

>src

主要操作的地方，组件的增加修改等都在这个文件夹里操作。

base.js是网络请求的地址
index.js是网络请求的方法，例如

assets: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。

components: 放置通用模块组件，避免重复工作。

那个js文件夹应该是放在assets文件夹下的。

echarts.js是一个数据可视化的组件。
element.js是引入的elementUI组件。
i18n.js是实现中英语言切换的组件。

router: index.js放置路由设置文件。

封装好的vuex结构。

公共方法汇总。例如我在request.js这里配置了一个请求时的状态码。

各种页面。

剩余的

App.vue: 入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用。

main.js:入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。.

register-service-worker.js：用来做离线缓存等任务的，如果在线上，只要访问过一次该网站，以后即使没有网络也可以访问（此时使用的是之前缓存的资源）。

.browserslistrc：配置兼容浏览器。
" >1%" :代表着全球超过1%人使用的浏览器
“last 2 versions” : 表示所有浏览器兼容到最后两个版本
“not ie <=8” :表示IE浏览器版本大于8（实则用npx browserslist 跑出来不包含IE9 ）
“safari >=7”:表示safari浏览器版本大于等于7

gitignore：忽略某个或一组文件git提交的一个配置。

babel.config.js：主要作用是将ECMAScript 2015+ 版本的代码，转换为向后兼容的JS语法，以便能够运行在当前和旧版本的浏览器或其它环境中。Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel，将ES6转换为ES5。

package-lock.json：是在npm install执行的时候生成的一份文件，用来记录package.json的来源和版本号。锁住package.json的来源和版本号，多人开发拉取代码，执行npm install生成node_modules时依赖的版本能保持一致。package-lock.json一般要提交到git仓库。

package.json：通过命令生成的vue项目就包含package.json，这是vue项目的表述文件，依赖包就是根据package.json来安装的。

README.md：内容相关的解释。

sh.exe.stackdump：啊这，这是个啥。似乎是使用git命令后出现的。

vue.config.js：是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。我在这里设置了api的接口网址。

---

三、页面搭建 （可能遇到的问题）

=￣ω￣=

1、 Login页面分析

先上源码

<template>
    <div class="login">
        <el-tabs
            v-model="activeName"
            type="border-card"
            class="login-tabs"
            stretch
            @tab-click="handleClick"
        >
            <el-tab-pane label="用户登陆" name="login" class="login-tabs-tab">
                <el-form
                    ref="loginForm"
                    :model="user"
                    status-icon
                    :rules="rules"
                    class="login-form"
                >
                    <el-form-item label="用户名" prop="username">
                        <el-input type="text" v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="user.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')">登陆</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="用户注册" name="register">
                <el-form
                    ref="registerForm"
                    :model="user"
                    status-icon
                    :rules="rules"
                    class="login-form"
                >
                    <el-form-item label="用户名" prop="username">
                        <el-input type="text" v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="user.password"></el-input>
                    </el-form-item>
                    <el