小白的全栈开发 一
简介
从新手的角度(对vue有了解,对Koa和Express有了解。)从0开始搭建一个通过RESTful API提供数据,vue组成的单页面的前端项目。希望能够帮助和我一样是全栈小白的你(看过很多关于怎么搭建全栈的文章,部分可能有借鉴)。
马上毕业了,毕设题目是XXX课程网站,就是一个类似B站的网站。学生可以观看视频,文档(暂定为word和pdf),可以在视频和文档下面进行评论。由老师上传视频和文档。因为要自己独立完成,所以开始自己的全栈之旅。分享出来我的全栈经历,并记录我的毕设进度(逃~)。
- 当时构想自己的网站是这样的: 是一个spa,有vue express提供接口api mongodb
开启全栈之旅
首先这些东西你要有,node vue-cli webpack mongodb,准备好之后 我们就开始全栈之旅吧
开始创建项目
cd到你的想创建目录的文件夹 然后在命令行 vue init webpack vuefile(你自己定的项目名称)
这里说一下这个ESLint 这是一个代码风格检查的插件,你的缩进是两个空格还是四个空格,你用不用: 当你的代码不符合ESLint的规则时就会报错,及时你的代码语法和逻辑都没错。看自己喜好选择yes还是no。如果不小心回车选择了yes。一会告诉你怎么解决。
然后就和截图上面一样 cd到vuefile 然后npm install一键安装依赖项 最后npm run dev 你的vue就可以跑起来了。 大概长这样
补上前面的坑,如果你的ESLint选了Yes 在vuefile>build>webpack.base.conf.js 找到eslint-loader 并将代码块注释。
项目已经创建完成了下面要将项目改成spa
登录界面构建
进入我们的vue工作区(src文件夹)
找到main.js 改成这个样子
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // 引入element-ui
import 'element-ui/lib/theme-default/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI) //全局使用ElementUI 就可以在其他.vue文件使用element-ui
/* eslint-disable no-new */
new Vue({
mode: 'history', //开启history模式保证spa可以和以前的网页一样可以前进和后退
el: '#app',
router,
template: '<App/>',
components: { App }
})
在components 新建组件login
-
<template>
<el-row class="content">
<el-col :xs="24" :sm="{span: 6,offset: 9}">
<el-switch on-text="登录" off-text="注册" v-model="inOut" on-color="#20A0FF" off-color="#42d885">
</el-switch>
<el-row>
<el-input
v-model="name"
placeholder="账号"
type="text">
</el-input>
<el-input
v-model="password"
placeholder="密码"
type="password">
</el-input>
<template v-if="inOut">
<el-button type="primary" @click="login">登录</el-button>
</template>
<template v-else>
<el-popover
placement="right"
width="200"
trigger="focus"
:content=tips>
<el-input
placeholder="确认密码"
v-model="password_r"
type="password" slot="reference">
</el-input>
</el-popover>
<el-button type="success" @click="register">注册</el-button>
</template>
</el-row>
</el-col>
</el-row>
</template>
<script>
export default {
data () {
return {
name: '',
password: '',
password_r:'',
inOut: true,
tips:"输入密码啊"
}
},
watch: {
// 如果 question 发生改变,这个函数就会运行
password_r: function () {
if(this.password_r ==''){
this.tips="输入密码啊"
}
else if(this.password_r != this.password)
{
this.tips="两次密码不一样哦"
}
else
this.tips="对接成功,可以注册了"
}
},
methods:{
login() {
this.$message({
message: `欢迎${this.name}同学`,
type: 'success'
})
},
register() {
this.$message({
message: `新同学${this.name}注册成功`,
type: 'success'
})
}
}
}
</script>
<style lang="stylus" scoped>
.el-row.content
padding 16px
.title
font-size 28px
.el-input
margin 12px 0
.el-button
width 100%
</style>
这一步运行需要npm install stylus 和 stylus-loader
为新的login.vue增加路由 到router下的index.js
//... 前面的就不写了 引入其他需要的东西
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/login',
name: 'Login',
component: Login
},
]
})
在我们的浏览器中输入http://localhost:8080/#/login
长成上面的样子的话,估计就成功了