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

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.querydb.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.querydb.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')
})

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

【前端Vue+后端Node.js+MySql】部署到服务器
[前端Vue+后端Node.js+MySql]部署到服务器文章目录 [前端Vue+后端Node.js+MySql]部署到服务器 1.买服务器 2.服务器操作 2.1.修改服务器密码,xshell登录 ...
PS网页设计教程VI——在Photoshop中创建一个食物博客布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
PS网页设计教程IV——如何在Photoshop中创建一个专业博客网站布局
向Talk-Mania网站致敬.一年前,在该网站上看过许多不错的网页设计教程.一年后,再回头想看看有没有什么新的教程的时候,蓦然发现该网站已经打不开了.也许是关闭了,也许是改了网站名了.幸好,去年本人 ...
如何创建一个个人博客
说明折腾了一个月的嵌入式web开发.从nodejs折腾到ajax再到boa,从事事坚持原创到ctrl+c .ctrl+v.学会了使用已有资源了,???. 刚开始的时候,是先用一个前端做了一个个人 ...
VuePress初学之利用模板theme创建一个个人博客网站
目录前言官方文档创建项目创建目录安装VuePress 初始化项目创建文档修改package.json 运行项目修改README.md的编码显示官方默认主题创建.vuepress文件 ...
nuxt express mysql_用Express+Nuxt从零开始写一个SSR博客
项目说明 1项目使用Express+mysql+nuxt+nginx写的一个项目.nuxt用于实现服务端渲染.nginx做代理服务器对静态资源代理 2项目环境是node的8.5. 3详情页使用mark ...
如何从零开始搭建自己的博客
作者:T9的第三个三角出处:http://blog.csdn.net/dazhaodai https://blog.csdn.net/dazhaoDai/article/details/737300 ...
如何从零开始搭建自己的博客（通俗易懂）
序作为一名合(zhuang)格(bi)的程序猿,经常写点东西,肯定少不了各种网站.博客,通俗的CSDN,文艺的简书,强大的GitHub,以及微信.掘金.知乎等等风格迥异的平台.不过,再多的地方,也容 ...
Github+Hexo 搭建一个个人博客
前言: 我最近想要将计算机界的几个基础课程的学习做一下笔记,可是又不想要写在这个wordpress站上(这个站专门负责花里胡哨的东西),所以我就想在github再创建一个小博客,作为一个分站. 提示: ...

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

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

二、前端实现过程

三、后端的实现过程

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

最新文章

热门文章