Vue前端頁面開發
阿新 • • 發佈：2020-12-11
環境搭建
-
利用@vue/cli4建立工程,為相容element-ui選用vue2.x版本
vue create vue-demo -
新增element-ui框架
cd vue-demo vue add element上述命令會安裝element-ui外掛，不用在入口
main.js檔案配置如下內容：import ElementUI from 'element-ui import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) -
安裝axios庫
npm install axios -S在入口
main.js檔案配置axios：var axios = require('axios') // 設定請求的基本連結，如果需要跨域不能直接設定為伺服器介面api axios.defaults.baseURL = '/api/' // 全域性註冊axios，之後在元件中通過this.$axios傳送請求 Vue.prototype.$axios = axios
建立登入頁面
-
修改App.vue根元件
<template> <div id="app"> <router-view></router-view> </div> </template>同路由相匹配的子元件將在
<router-view>標籤渲染 -
建立Login.vue元件
<template> <body class = "login_bg"> <div class = "login_container"> <el-form ref="LoginForm" :model="LoginForm" label-width="80px"> <h2 class = "login_title">登入</h2> <el-form-item label="使用者名稱"> <el-input v-model="LoginForm.username"></el-input> </el-form-item> <el-form-item label="密碼"> <el-input v-model="LoginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click = "login">登入</el-button> <el-button @click = "goToRegist">註冊</el-button> </el-form-item> </el-form> </div> </body> </template> <script> export default { name: 'Login', data() { return { LoginForm: { username: '', password: '' } } }, methods: { // 登入 login(){ this.$axios.post('/login', { username: this.LoginForm.username, password: this.LoginForm.password }).then(successResponse => { // 後端傳送過來的是 Result 型別資料，判斷 Result.code 即可 if(successResponse.data.code === 200){ // 觸發 store 中的 login() 方法，將 LoginForm.username 欄位傳遞給 store 中的 username this.$store.commit('login', this.LoginForm) var path = this.$route.query.redirect this.$router.replace({path: path === '/' || path === undefined ? '/index' : path}) this.$alert(successResponse.data.message, '