参考B站自学用Vue，element开发电商管理系统记录

最新推荐文章于 2024-04-04 20:11:25 发布

qq_39164701

最新推荐文章于 2024-04-04 20:11:25 发布

阅读量158

点赞数

分类专栏：前端文章标签： vue.js git

本文链接：https://blog.csdn.net/qq_39164701/article/details/114964462

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初始化
1 npm install
2 node app.js
3 postman跑接口

代码
终端里git status 查看工作区域是否干净
创建新分支 git checkout -b login
查看分支 git branch

创建login.vue
路由里import：import Login from '../components/Login.vue'，
创建路径：

index.js里配置

Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }
  ]
})

APP.Vue里渲染
<router-view></router-view>

按需导入

import { Button, Form, FormItem, Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

表单
给表单绑定一个数据对象loginForm，在script里定义：

data(){
    return {
      loginForm: {
          username: 'gyd',
          password: '1234'
      }
    }
  }

接下来给每个具体的表单项双向绑定到对象的某个属性

校验表单数据是否合法：

给form绑定一个规则校验对象
在规则校验对象中定义几个校验属性
在item中用prop指定对应的校验规则

重置表单功能：

表单添加ref=‘loginFormRef’,（这个名字作用为了能获取是这个表单）
重置按钮加方法resetLoginForm
methods里

 resetLoginForm(){
      this.$refs.loginFormRef.resetFields();
    }

给登录按钮绑定单击事件login
导入弹框然后挂载 Vue.prototype.$message = Message
methods定义：

login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const {data:res} = await this.$http.post("login",this.loginForm);
        *//（↑解构赋值）*               *（↑获取服务端返回数据）*
        if (res.meta.status !== 200) return this.$message.error('登录失败')
        this.$message.success('登录成功')
        window.sessionStorage.setItem('token', res.data.token)
        this.$router.push('/home')
      })
    }

新建Home.vue，import进router/index.js，在route里添加path

路由导航守卫

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

以上完成登录页面，用git同步代码到码云
终端里 git status

git add .
git commit -m “完成登录功能”
git push 如果是第一次提交新分支的话继续往下
git push -u origin login(创建新分支)
git checkout master
git merge login（切换到主分支再合并）
git push（将本地最新的master分支上传）

拦截器一般做什么？

1. 修改请求头的一些配置项

2. 给请求的过程添加一些请求的图标

3. 给请求添加参数
main.js

axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

侧边栏的折叠与展开
collapse，动态绑定aside的width 写个点击iscollapse取反的方法就ok
代码：

<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="toggle-button" @click="isCollapse = !isCollapse">
{{ isCollapse? "展开>>" : "<<折叠" }}
</div>
</el-aside>
//初始定义isCollapse为false

拼接路由

   {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    //（后续用到）
    children: [{ path: '/welcome', component: Welcome },
      { path: '/users', component: Users }
    ]
  }

制表

el-row里:gutter 间距
el-rcol里:span 占位符的宽度
el-table里：data绑定数据源
el-table-column里prop数据项，label标签名

其他校验规则

data里定义一个变量校验规则 checkEmail

var checkEmail = (rule, value, cb) => {
        const regEmail = /规则xxx/
        if( regEmail.test(value) ) return cb()//校验成功
        return cb(new Error('请输入合法邮箱'))//失败
      }

再在校验规则名里加上

{ validator: checkEmail, trigger: 'blur', message: '邮箱不合法'}

校验表单合法

this.$refs.addForm.validate( valid => {
          if （!valid） return//不合法
         //接下来可完成请求
        } )

请求编辑用户

// 挂包
import axios from 'axios'
Vue.prototype.$http = axios

用 this.$http.put(路径,参数)

editUserInfo() {
        this.$refs.editFormRef.validate(async valid => {
          if (!valid) return
          // 开始完成用户请求
          const {data:res} = await this.$http.put('users/' + this.editForm.id , this.editForm)
          if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
          this.editDialogVisible = false
          this.getUsersList()
          return this.$message.success(res.meta.msg)
        })
      },

confirm弹窗
挂载
Vue.prototype.$confirm = MessageBox.confirm

const result = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).catch(err >= err）
                //result的值此时有confirm和cancel 用if判断后续操作