从零开始创建一个个人博客前端Vue，后端node.js（第一天）_前端个人博客

一、前言（具体代码在尾页）

1、创建vue项目可以使用vue ui命令进行快速的搭建

2、由于我是一个新手所以说，前端使用的是element ui快速构造了一个网页（头秃，没有设计稿，ui空白一片），对于新手程序员的话如果说没有比较适合练手的项目，也可以试试搭建一个，比较考验自己的学习成果

3、第一天只是把登录界面的前台登录，和后端的请求交互进行了一下处理（在老家，过年事情比较多，还没有空调，做一个小时就冷的很，第一天也就搞了有两三个小时吧）

此处贴一个登录页的图

二、前端实现过程

1、页面布局

采用element ui的container布局容器进行了基本的页面构造：一个头部，和主页面区域

2、前端实现表单数据的验证

此处是使用的是form表单的表单验证，使用element ui 的话很方便，此处在官网截取了一小段验证规则的写法（是不是超级简单），虽然说前端进行了数据的基本的校验，但是在数据发送到后端的时候还是需要进行数据的校验的（此处是后话了）

        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],

此处是粘了一个校验的结果（失去焦点时触发）

 3、登录成功和登录失败时弹出的消息提醒

 此处粘了一个登录成功和失败进行的消息提醒

！！！此处进行了数据的请求，向后台的服务器发送数据，比对数据库已经存在的账号信息（由于是个人博客就没有注册的功能（真是个小机灵鬼））

 三、后端的实现过程

1、初始化进行一个基本的服务器的创建（我用的是express框架）

const express = require('express')
const app = exxpress()
app.listen(8080,()=>{
    console.log('服务器已经运行在了127.0.0.1:8080')
})

2、添加数据库并进行数据的初始化

此处粘的是数据库里面的数据

const mysql = require('mysql')
// 引入cors资源，解决跨域问题
const cors = require('cors')
// 配置基本的数据库模块
const db = mysql.createConnection({
  host: '127.0.0.1',
  user: 'root',
  password: 'zhang187332',
  database: 'self_boke'
})

上面的cors是一个中间件用来进行解决浏览器的跨域问题的

3、定义路由（本人是第一次进行项目的独立开发（模块化并不熟练就在一个页面中进行的））

app.get('/login', (req, res) => {
  const dd = req.query
  db.query(`select * from login_data where username=? and password=?`, [req.query.username, req.query.password], (err, rst) => {
    if (err) return res.send(err.message)
    if (rst.length !== 1) {
      return res.send('查询错误')
    }
    console.log(rst)
    res.send({
      status: 200,
      message: '登陆成功'
    })
  })
})

以上就是全部的了明天见哦

附件代码：

1、login.vue

<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>欢迎来到我的个人博客</h1>
      </el-header>
      <el-main>
        <!-- 卡片区域 -->
        <el-card>
          <!-- 表单输入区域 -->
          <el-form :model="form" :rules="formRules" ref="formRef" label-width="80px">
            <el-form-item label="用户名：" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <!-- 下面的登录和重置按钮的实现 -->
            <el-form-item id="btnPlaceSet">
              <el-button @click="login" type="primary">登录</el-button>
              <el-button @click="reset" type="danger">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 登录表单的数据源
      form: {
        username: '',
        password: ''
      },
      // from表单的校验规则定义
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 45, message: '长度在 1 到 45 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 45, message: '长度在 1 到 45 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 点击登录时候的执行函数
    async login() {
      const { data: res } = await this.$http.get('/login', { params: this.form })
      if (res.status !== 200) {
        return this.$message.error('登录失败')
      }
      this.$message.success('登录成功')
      this.$router.push('/home')
    },
    // 点击重置时候的执行函数
    reset() {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>
 
<style lang="less" scoped>
.el-container {
  height: 100%;
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    height: 100%;
    .el-card {
      width: 30%;
      #secondRow {
        margin-top: 30px;
      }
      .el-input {
        width: 100%;
      }
      #btnPlaceSet {
        width: 100% !important;
        display: flex;
        justify-content: space-around !important;
      }
    }
  }
  .pwdHeight {
    line-height: 40px;
  }
}
</style>

2、前端路由的实现

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
Vue.use(VueRouter)
// 定义路由节点
const routes = [
  { path: '/', redirect: '/login' },
  { path: '/home', component: Home },
  { path: '/login', component: Login }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

3、前端main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入elementui样式表和js
import 'element-ui/lib/theme-chalk/index.css'
import { Message } from 'element-ui'
import '@/plugins/element.js'
// 引入自定义的全局样式
import '@/assets/CSS/global.css'
// 导入处理网络请求的包axios来实现ajax请求
import axios from 'axios'
// 给axios设置一个默认的访问地址
axios.defaults.baseURL = 'http://127.0.0.1:3006'
// 因为axios并不是插件，所以不能像其他插件一样在main.js文件中引入之后直接使用，只能是其他组件使用的时候实时引入
Vue.prototype.$http = axios
Vue.prototype.$message = Message
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')

4、后端app.js

const express = require('express')
// 引入数据库模块
const mysql = require('mysql')
// 引入cors资源，解决跨域问题
const cors = require('cors')
// 配置基本的数据库模块
const db = mysql.createConnection({
  host: '127.0.0.1',
  user: 'root',
  password: 'zhang187332',
  database: 'self_boke'
})
// 数据库链接
db.connect()
// 实例化一个基本的服务器
const app = express()
// cors中间件的引用与使用
app.use(cors())
app.get('/login', (req, res) => {
  const dd = req.query
  db.query(`select * from login_data where username=? and password=?`, [req.query.username, req.query.password], (err, rst) => {
    if (err) return res.send(err.message)
    if (rst.length !== 1) {
      return res.send('查询错误')
    }
    console.log(rst)
    res.send({
      status: 200,
      message: '登陆成功'
    })
  })
})
app.listen(3006, () => {
  console.log('服务已经启动在了http://127.0.0.1:3006')
})