VUE部分
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
1.安装Node
- 百度nodejs,官网第一条进去 https://nodejs.org/en/
- 第一个是稳定版,第二个是最新的,一般都是下载稳定版本,所以点击第一个下载,下载完成后直接双击运行安装
- 一直下一步就好了,最后点击这个Add to PATH,这样你就不用自己去配置环境变量,不然还得自己配置环境变量,配置的话也不难,百度教程很多。最后Install,等待安装完成,完成之后Finish,NODE就安装完成了。检验一下是否可用,打开命令窗口,输入node --version,检验npm是否可用,命令窗口输入npm --version,这时候有版本号就表示安装成功。
2.安装VUE脚手架
- cmd运行
npm install -g @vue/cli
or
yarn global add @vue/cli`
- 查看版本
vue --version
3.VUE3.0介绍和优点
vue3.0增加了UI界面,不用在敲命令行就可以快速的创建项目和添加插件,推荐新手使用3.0以上版本
4.创建项目
- 在命令行中执行
vue ui
,如果没有问题会直接弹出操作界面,没有弹出的话可以自己输入http://localhost:8000/ - 点击左上角项目管理器
- 可以创建也可以导入,我们这次新创建一个项目
- 添加项目名,点击下一步
- 选择默认配置,点击创建完成
6.稍等一会项目就创建完了
5.如何快速安装插件
- 选择插件导航栏
- 点击添加插件,在搜索框中搜索需要的插件
- 点击安装
6.如何启动项目
- 点击任务,选择第一个server,点击运行就可以启动项目
- 点击启动app,就会自动弹出vue界面
SpringBoot部分
-
File------>New------>Project
-
spring Assistant------>选择JDK版本------->Next
-
填写包名称----->项目名称--------->Next
-
选择web项目------>Next
-
更改项目保存路径
-
第5步完成即可创建项目成功
-
将src标注成sources
-
编写相关的Controller、Service
package com.example.demo;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloWorld {
@RequestMapping("/hello")
public String hello(){
return "hello world !";
}
}
-
启动主程序
-
访问localhost:8080/hello,如下图
如何前后端分离开发
通过一个简单的用户验证来讲解如何开发
1.开发前端简单界面
为了方便开发,我们引入饿了吗UI
- 引入element ui
- 引入Axios依赖
在main.js中引用axios
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import axios from 'axios'
Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axios
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
- 前台代码
<template>
<el-form :rules="rules" class="login-container" label-position="left"
label-width="0px" v-loading="loading">
<h3 class="login_title">系统登录</h3>
<el-form-item prop="account">
<el-input type="text" v-model="loginForm.name" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
<el-form-item style="width: 100%">
<el-button type="primary" @click.native.prevent="submitClick" style="width: 100%">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default{
data(){
return {
rules: {
account: [{required: true, message: '请输入用户名', trigger: 'blur'}],
checkPass: [{required: true, message: '请输入密码', trigger: 'blur'}]
},
checked: true,
loginForm: {
name: '张三',
password: '666666'
},
loading: false
}
},
methods: {
submitClick: function () {
var _this = this;
this.loading = true;
this.$axios({
method:'post',
url:'/api/login?name='+this.loginForm.name+'&password='+this.loginForm.password,
}).then(resp=> {
_this.loading = false;
var data = resp.data;
if (resp.status == 200) {
// eslint-disable-next-line no-debugger
debugger;
//成功
var code = data;
if (code == true) {
_this.$alert('登录成功!', '成功!');
} else {
_this.$alert('登录失败!', '失败!');
}
} else {
//失败
_this.$alert('登录失败!', '失败!');
}
});
}
}
}
</script>
<style>
.login-container {
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
.login_remember {
margin: 0px 0px 35px 0px;
text-align: left;
}
</style>
- 效果图
2.解决跨域问题
vue3.0与1.0,2.0不同,需要自己创建配置文件,在根目录下创建vue.config.js,在启动时就会自动加载配置文件
module.exports = {
devServer:{
//所有通过'api'调用的请求都会转发到'http://localhost:8090/'下面
proxy:{
'/api':{
target:'http://localhost:8090/',
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
}
3.通过Ajax调用后端接口
4.后台接口开发
创建用户VO
package com.example.demo;
public class user {
private String name;
private String password;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
创建Controller
package com.example.demo;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class login {
@PostMapping(value = "/login")
//@ApiImplicitParam(name = "id", value = "id值", paramType = "path", required = true, dataType = "Integer")
public boolean login(user user) {
System.out.println("name :"+user.getName()+"password :"+user.getPassword());
//简单演示,直接把用户名和密码写死
if("user".equals(user.getName())&&"user".equals(user.getPassword())){
return true;
}else{
return false;
}
}
}
5.效果图
如果输入错误的
成功