一，本次项目的心里历程
其实压根算不上项目，项目只有登录和注册其他的什么也没有，不过是自我安慰罢了，本项目也不是我本人自己写的，思路很多都是从网上抄袭的，算是超级缝合聚怪了。
本来要写的详细的但是后来想了想太烂了，目前来说就罢了，之后慢慢写吧。
二，本次项目大致需要的东西
前端vue webpack
后端node
数据库mysql
三，本次项目的代码
前端界面
main.js 基本的配置
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
app.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
html,
body,
#app {
width:100%;
height: 100%;
}
</style>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/index';
import Register from '../views/Register';
import Login from '../views/Login';
import notfond from '../views/404';
import userpage from '../views/userpage'
import community from '../views/community'
import about from '../views/about'
import usersetting from '../views/usersetting'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/index',
},
{
path:'/index',
name:'index',
component:Index
},
{
path:'/Register',
name:'Register',
component:Register
},
{
path:'/Login',
name:'Login',
component:Login
},
{
path:'*',
name:'404',
component:notfond
},
{
path:'/userpage',
component:userpage
},
{
path:'/community',
component:community
},
{
path:'/about',
component:about
},
{
path:'/usersetting',
component:usersetting
}
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
// }
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
views/login.vue
<template>
<div class="box">
<div class="loginFormbox">
<div class="titlebox">
<span class="title">欢迎来到登录系统</span>
</div>
<div class="loginForm">
<el-form
:model="registerUser"
status-icon
:rules="rules"
ref="registerForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input
type="text"
v-model="registerUser.username"
autocomplete="off"
aria-placeholder="请输入用户名"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
type="password"
v-model="registerUser.password"
autocomplete="off"
aria-placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="submit_btn"
@click="submitForm('registerForm')"
>登录</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "Login",
component: {},
data() {
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.registerUser.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
radio: "1",
registerUser: {
username: "",
password: "",
},
rules: {
username: [