2021-7-01 SDU暑期项目实训日志报告02

学习目标：

本篇博客记录我6-30与7-01两天的学习工作。

1. 尝试使用Vue+ElementUI制作登录界面
2. 配置路由router

---

学习内容：

学习参考链接为Vue+ElementUI制作用户登录页面
（一）配置ElementUI
在命令行中执行如下命令
在项目main.js中插入如下代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

在package.json中增加上这个，并编译一下，成功。
(二）配置router
按照Vue项目配置router的指导来一步步对项目进行配置。
在main.js中增加如下代码：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router=new VueRouter({
	routes:[
		//{path:"/",component:home},
		//{path:"/about",component:about}
		{path:"/",component:Login}
	]
})

然后再在App.vue中增加如下代码：

```html
<template>
  <div id="app">
	<router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'app',
  components: {
    
  },
  data () {
    return {}
  }
}
</script>

（三）写登录界面
在component下新建Login.vue文件，输入如下内容：

<template>
  <div>
    <!--flex弹性盒子模型，justify-content：主抽 -->
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
              <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
  export default {
    //单页面中不支持前面的data:{}方式
    data() {
      //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
      return{
        //之前是在里面直接写username，password等等，但是这里要写return
        //因为一个组件不管要不要被其他组件用，只要这样定义了，它就会认为可能这个组件会在其他的组件中使用
        //比如说在这里定义了一个变量，然后把这个组件引入到A组件中，A组件中修改了这个变量
        //同时这个组件也在B组件中引用了，这时候A里面一修改，B里面也变了，它们用的是一个值
        //可是一般来说可能希望在不同的组件中引用的时候，使用不同的值，所以这里要用return
        //这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
        user:{
          username:'zhangsan',
          password:'123',
          //为了登录方便，可以直接在这里写好用户名和密码的值
        }
      }
    },
    methods:{
      doLogin(){//一点击登录按钮，这个方法就会执行
        alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
      }
    }
  }
</script>

（四）编译运行
运行截图如下

---

学习总结：

初步掌握了使用Vue开发页面的技术。

---

今后学习计划：

将细致讨论需求并形成完整的需求文档。