Node系列学习之简单博客前台-一一网

这是我参与更文挑战的第21天，活动详情查看：更文挑战

准备自己做一个博客的前台页面, 使用 VueCLi 创建, 基于 Vue+Element UI 。

全局安装VueCli

npm install -g @vue/cli
复制代码

初始化项目

vue create tmier-blog
复制代码

简单运行

cd ./tmier-blog
npm run serve
复制代码

看到下面这个界面便是运行成功, 项目初始化完成。

安装插件

先安装一下axioas和element-ui, 以后需要啥插件再另外安装

npm i element-ui axios
复制代码

Element使用

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 完整引入Element-UI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
// Vue.use
Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
复制代码

Axios二次封装

安装好axios之后, 简单对axios进行一下封装

在 src下新建 utils 文件夹, 然后新建 src/utils/request.js

import axios from 'axios'
const request = axios.create({
  baseURL: 'http://127.0.0.1:1996/', // 配置基础路径
  timeout: 1000 * 15,
  headers: {
    "Content-type": "application/json;charset=UTF-8",
  }
})
// 请求拦截器
request.interceptors.request.use(
  request => {
    return request
  },
  error => {
    // 如果报错，对错误进行处理
  }
)
// 想要拦截器
request.interceptors.response.use(response => {
  return response
}, error => {})
export default request
复制代码

然后在 src下新建 api 文件夹, 新建 src/api/login.js

import request from '@/utils/request.js'
export function LoginAPI (username, password) {
  return request({
    url: `/api/user/login`,
    data: {
      username,
      password
    }
  })
}
复制代码

删改路由

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    redirect: {name: 'login'}
    // component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/Login/index.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router
复制代码

在 src/views下新建 Login 文件夹, 并在其下新建 index.vue

<template>
  <div class="tmier-login">
    <h1>登录</h1>
    <el-input class="tmier-login-input" v-model="username"></el-input>
    <el-input class="tmier-login-input" v-model="password" type="password"></el-input>
    <el-button type="primary" class="tmier-login-input" @click="clickLogin">登录</el-button>
  </div>
</template>

<script>
//import x from ''
import {LoginAPI} from '@/api/login.js'
export default {
  components: {},
  data() {
    return {
      username: '',
      password: ''
    }
  },
  computed: {},
  methods: {
    async clickLogin() {
      await LoginAPI(this.username, this.password)
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url()
.tmier-login {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .tmier-login-input {
    width: 300px;
    margin-bottom: 20px;
  }
}
</style>
复制代码