Vue-elementUI

Log in

Related configuration of git before development

1. Create gita new branch (every time a new function is developed, it is best to create a new branch, and then merge it into the main branch after development)
2. Create a new branch git checkout -b login, create a sub-branch login, and switch to that branch
3. View all branches of the current projectgit branch

Create a login component and configure related routes

1. Treat loginthe component as a redirected component, ie:

const routes = [
    {
    
    path:'/', redirect: '/login'},
    {
    
    path:'/login', component: Login}
  ]

2. Introduce the global style global.css, and then main.jsintroduce the global style in the entry fileimport '路径'

//引入全局样式文件
import '@/assets/css/global.css'

3. loginThen lay out a box in the middle of the component with absolute positioning
4. Install element-uithe plug-in (after installation, don't forget to main.jsimport it, otherwise an error will be reported)
5. Introduce el-form、el-form-itemcomponents, where two button components can el-buttonalso be placed el-form-itemin the component

If you el-formset the width to 100%, and then paddingsqueeze the input box in, you will find that the input box on the right will exceed. The reason is that formthe form defaults to content-box, and the solution: just change it border-box.
In the icon in the input box, use elementuithe attribute of the input box to add the icon instead of 标签<i>the method of adding. That is, you can add display icons at the head and tail of the component through the prefix-iconand suffix-iconattributes input, or slotplace icons through .

6. Use Ali icon library

1. Put the downloaded fontfolder into the resource assetsdirectory
2. main.jsImport the font icon in the entry fileimport '@/assets/fonts/iconfont.css'
3. Use: add the base class first iconfont, then add the class name of the icon you want

7. Set up a request interceptor so that the permission field is added to the request header every time a network request is sent.

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

8. Call the verification method validateto verify whether the content of the input box is legal

this.$refs.loginFormRef.validate(回调函数)

9. Send a network request for login, and save it to the client
   after successful login ; other API interfaces in the project except login must be accessed after login; it should only take effect when the current website is open, so save it intokensessionStorage

tokentokensessionStorage

login(){
    
    
   this.$refs.loginFormRef.validate(async valid =>{
    
    
         if(!valid) return 
         const {
    
    data} = await requestLoginData({
    
    params:this.loginForm})
         if(data.meta.status === 200){
    
    
           this.$message.success('登录成功')
           window.sessionStorage.setItem('token',data.data.token)
           this.$router.push('/home')
         }else{
    
    
           this.$message.error('您输入的用户或者密码不正确')
         }
})

10. Set route navigation guards

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

11. The reset button implements the reset of the form. Implementation method: elementthe method that comes with the callresetFields

preSet(){
    
    
     this.$refs.loginFormRef.resetFields()
 }

Code sync and upload

1. View code status:git status
2. Add to cache:git add
3. submit:git commit -m "完成了登录功能"
4. View branch status:git branch
5. merge into master branch
   1. Switch to master branch:git checkout master
   2. Merge all other branches based on the master branch:git merge login
6. Push the local code to the cloud:git push
7. masterThe above is just pushing the main branch to the cloud. If you want to loginpush the branch to the cloud, you need
   1. switch to loginbranch
   2. Push to the cloud:git push -u origin login

home page

1. Page Layout

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside>Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

2. The logout function in the head realizes
   the main task: after clicking logout, because it is a method-based tokenlogin, it only needs to destroy the local token. In this way, subsequent requests will not carry token, and you must log in again to generate a new one token, and then visit the page.
   Among them, tokenthe syntax for destroying the local is:window.sessionStorage.clear()

3. Implementation of the sidebar area

   1. Click on the merged implementation. Bind width to el-asidedynamic instead of el-menudynamic binding.
      <el-aside :width="isCollapse ? '64px' :' 200px'">
   2. Regarding the extra border pixel on the left side of the menu, you can el-meun、el-submenuadd it overflow:hidden.

Welcome component

1. Take advantage of redirects, maindisplaying inWelcome
   1. New Welcomecomponent
   2. Configure routing information

{
    
    
   path:'/home',
   component: Home,
   redirect: '/welcome',
   children:[
     {
    
    
       path:'/welcome',
       component: Welcome
     }]
}

3. mainSet the route placeholder in<router-view/>
4. Using pathinformation, mainrouting jumps in the configuration. It should be noted that the information in the route must be consistent pathwith that in the returned datapath
5. How to ensure that after refreshing the page, the menu menu-itemis also in the active state?

menuThere is an attribute in: , default-activewhich saves the current active menu index, that is, if you want a certain item in the menu to be highlighted and activated, then assign the indexvalue of that item to default-active.
After clicking a certain menu, indexstore the current menu in it sessionStorage, and after refreshing the page, assign the saved value to 1. Bind default-active
a click event to the second-level menu . 2.
Pay attention to the question of whether to add '/'it .
pathsessionStorage
createsessionStorage

User component

1. Navigation breadcrumb area
2. Usage of scoped slots:

<template slot-scope="scope">           
</template>

3. When changing the state, a network request needs to be sent. If the network request fails to be sent, the original state needs to be changed. And when the state is changed, you can call el-switchthe built-in changeevent
4. The value in the header input box v-modelcan be set as: the parameters passed when sending a network request, queryand then attributes can be added to the input box clearable, and then clearevents can be added, and the event response functions are all network request functions , so that the functions of and getUserDatacan be realized very quickly . Key point: Bind the value of the current input box as a parameter when sending a network request搜索清除输入框
v-model
5. Implementation of custom validation rules
   1. dataDefine the rule variable in, note that it is written returnabove

// 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
    
    
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
    
    
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
    
    
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
    
    
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }

2. Use validation rules

email:[
     {
    
     required: true, message: '请输入用户名', trigger: 'blur' },
     {
    
     min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },
     {
    
    validator: checkEmail, trigger: 'blur'}
   ],
mobile:[
     {
    
     required: true, message: '请输入用户名', trigger: 'blur' },
     {
    
     min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },
     {
    
    validator: checkMobile, trigger: 'blur'}
   ]

6. After closing Dialogthe dialog box, the data in the input box should be reset
   • To Dialogadd the built-in closeevent function
   • By Formsetting the form and refcalling resetFieldsthe method, the reset of the form is realized
7. Add pre-verificationDialog to the button in the click dialog box , and then send the network request to add the user确定

this.$refs.userDialogRef.validate(valid =>{
    
    
	//首先判断是否校验通过
	//如果通过了，才发送网络
})

8. After the dialog box for editing user information Dialogis closed, the reset form method is also called. At this time, the reset is not to reset the form information, but to reset the validation rules. It is different from the form reset inside the user information Dialog.
9. To implement the delete button, you need to use elementUIthe prompt component in the bullet box Message Box, or it is not so much a bullet box component as it is a method call

Roles component

1. Through the attribute <el-table-column type="expand" >of , you can create a new expanded columnexpand in the table
2. In expanded columnsLayout , the way the data is laid out is achieved through layout, and no ready-made components are used because there are no components available
3. in the expanded column

1. First use the scope slot to get the data of the current row (template)
2. Then there is a row label el-row, and loop through this label v-forto render the first-level permission data
3. el-rowThere are two columns in the row label
4. el-colThe specific data is rendered in the first column label
5. In the second column label el-col, a row label is nested insideel-row
6. There are two column labels in the second row label , and the data is rendered by passing el-rowin the second row labelel-rowv-for
7. el-colThe specific data is rendered in the first column label , that is, the data of the secondary authority
8. In the second column label el-col, the label is placed el-tag, and v-forthe data of the third-level authority is rendered directly in the form of changing the label

4. el-tagAdd attributes to each label closable, so that el-tagthe delete icon of the label can be realized
5. After clicking el-tagthe delete icon of the label, MessageBoxa pop-up box will pop up, and it will be used to display whether to confirm the deletion of the permission
6. el-tagIn the process of adding the upper border line and the lower border line to the labels of each row , dynamic binding class names , class name arrays and ternary expressions are used to determine whether to add class names
7. Centering the labels of the first-level authority and the second-level authority el-tagis also achieved by dynamically binding the class name .