1. 创建一个基于 webpack 模板的新项目
终端切换到你的目标目录下创建一个项目,这里以在vue的安装目录下创建一个叫做my-vue-project的项目为例:输入
vue init webpack firstApp
webpack 后跟的就是你要建立的vue项目名称firstApp
2:启动项目,访问项目
.首先切到新建的目录下,上一步我新建的项目名称为firstApp
输入启动命令行
npm run dev
有的人会用cnpm run server这样也可以启动项目,主要是看vue项目中的package.json文件内配置来确认使用哪一个命令来启动项目,我这配置的是dev。
出现
DONE Compiled successfully in 9235ms 11:11:44 AM
I Your application is running here: http://localhost:8080
表示项目启动成功了,直接去访问web页面:home和About这两个按钮是新加的
终止服务只要在命令窗口输入ctrl+c即可
3、开始在idea中,去开发我们刚创建的firstApp项目
步骤一:先择file,点击open导入我们的项目
步骤二:引入vue插件
idea要想支持vue项目,只需要引入vue插件即可
file-setting-plugins - browse repositorise
搜索vue,找到后下载即可
下载后,在路径file-setting-plugins搜索vue,勾选框选中后,选择apply激活即可
步骤三:新建两个vue文件
在src目录下新建一个包,在该包下新建两个vue文件,一个是About.vue,一个是Home.vue文件。
之后再路径file-setting-editor-file and Code选中,新建,name填vue File ,Extension填vue
下面是让你填模板内容,我这里填的是
<template>
<div>
{{msg}}
</div>
</template>
<style>
body {
background-color: #ff0000;
}
</style>
<script>
export default{
data () {
return {msg: '这个是Home模板页'}
}
}
</script>
按下面代码新建的两个类的内容
About.vue:
<template>
<div id="app">
<span>我的第一个vue项目</span>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Home.vue:
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>内容</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.serial}}</td>
</tr>
</table>
</div>
</template>
<style>
body {
/*background-color: #;*/
}
</style>
<script>
export default {
data() {
return {
msg: '这个是Home模板页',
books:[
{
id : 1,
serial:"测试1"
},
{
id : 2,
serial:"测试2"
}
]
}
}
}
</script>
页面在加载的时候,首先会执行script标签内的default 方法,data函数就是我们要展示的内容
template标签是我们展示的内容,我们要读取data里的内容,只要在template标签内使用{{msg}},这样我们就可以直接拿到msg这个对象的值。可以看到books这个对象我这里定义的是一个数组,所以我们在读取的时候就需要遍历,方式和etl表达式类似,v-for=“item in books” 其中books就是我们data内地books对象,每次读取的时候,会将对象赋给item,所以在访问数组里的内容时,只需要item.变量名即可。
在index.js中,再去建立路由Router的相关内容
import Home from "../views/Home.vue"
import About from "../views/About.vue"
格式化代码之后会将单引号变为双引号,最后还会加上逗号,末尾的分号于是会导致三种错误:
Strings must use singlequote quotes---双引号
Extra semicolon semi ----末尾分号
error Unexpected trailing comma comma-dangle---逗号
解决方法:配置文件eslintrc.js中设置(或者向我一样修改代码)
配置路径
path:访问时的路径
component:与上面import后跟的名字关联
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '../views/Home'
import About from '../views/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
component: About
}
]
})
在app.vue中加两个链接,用于访问我们新建的类
<template>
<div id="app">
<div id="nav" >
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
to="/home" 这个就是我们在index.js中配置的路径
这里需要注意,template这个标签下面只能存在一个根目录,所以我们在开发过程中,首先会写一个div盒子,在div内去编写我们的内容
步骤四:启动项目
同样,我们在idea中一样可以启动我们的项目,只需要在idea的终端中输入
npm run dev
如图:
出现success代表项目启动成功,接下来去访问
可以看到,编写的测试内容是存在的。
终止服务同样只需要crtl+c即可
4、SpringBoot项目开发
步骤1:新建SpringBoot项目
1.file - new - project -spring initiallizr
2.这里直接选择下一步,在group中填写我们的项目标识,类似于根目录
java version 选择8
3.这里填好之后,直接下一步next,这一步我们需要选择需要那些插件,因为我用的是mysql,所以我选择是lombok(提供了实体类用的get,set方法,后续会用到),spring web,spring data jpa(封装的用crud方法),mysql driver.
4.再下一步,项目就建立成功了
SpringbootdemoApplication这个类,是我们程序的入口。
5.将application.properties删掉,这里我们用的是application.yml文件,这个更清晰,内容很简单,只配置了一些数据库链接,以及执行脚本的输出控制
server:
port: 8181
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/db2019?useUnicode=true&characterEncoding=utf-8
username: root
password: 123456
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
因为vue项目中端口用的是8080,所以我们这里需要改动下,这里就手动设置为8181,以便能和vue方便交互
datasource下配置的为数据库连接相关信息
show-sql用来控制,控制台是否打印sql语句,format_sql用于打印的脚本日志格式化操作,默认是打印一行
以上我们项目就建立完成了,下面开始去和数据库做交互
步骤2:springboot的crud
1.在demo包下新建一个entity包,用来存放实体类
2.在entity包下新建一个实体类,因为我在数据库中建立的表名为payment,所以实体类名我以Payment新建一个实体类,
下面是表结构
下面是实体类的内容
@Entity
@Data
public class Payment {
@Id
private Integer id;
private String serial;
}
Entity注解用于和表映射
Data注解用于给id,serial添加get,set方法
Id注解用于表主键
3.在demo包下新建一个repository包
4.在该包下新建一个接口,继承JpaRepository
public interface PaymentRepository extends JpaRepository<Payment,Integer> {
}
两个参数,一个是实体类,一个是主键
5.在demo包下新建一个controller包,并在controller包下新建一个PaymentHandler类,
@RestController
@RequestMapping("/payment")
public class PaymentHandler {
@Autowired
private PaymentRepository paymentRepository;
@GetMapping("/findAll")
public List<Payment> findAll(){
return paymentRepository.findAll();
}
}
findAll方法就是jpa插件封装的查询方法,该方法会将对应表的所有内容查出来。
6.在demo包下新建一个config包,并在config包下新建一个CorsConfig类,并实现WebMvcConfigurer接口,该类主要用于处理跨域问题,如果不处理的话,当前端在调用后端的接口时,若不在同一个域,就会无法访问。
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
//本应用的所有方法都会去处理跨域请求
registry.addMapping("/**")
//允许远端访问的域名
.allowedOriginPatterns("*")
//允许请求的方法
.allowedMethods("GET","POST","PUT","DELETE","OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
步骤3:启动项目
在SpringbootdemoApplication类中,执行main方法即可。
输入http://localhost:8181/payment/findAll
下面是打印的sql脚本
这个是展示的内容
以上springboot项目也完成了,下面开始由vue和springboot交互
5:SpringBoot + vue交互
vue如果要使用ajax访问后台,需要引入axios插件,同样在idea的终端中输入 cnpm i axios --save-dev,执行后,会在node_modules目录下会存在axios这样的一个文件。
引入插件后,在项目main.js中全局引用
import axios from 'axios'
Vue.prototype.$axios=axios
这样我们在其他vue页面中使用this.$axios便可以使用了
3.改造Home.vue页面
data() {
return {
msg: '这个是Home模板页',
books:[
{
id : 1,
serial:’测试1‘
},
{
id : 2,
serial:‘测试2’
}
]
}
},
created(){
const _this = this;
this.$axios.get('http://localhost:8181/payment/findAll').then(function (resp) {
_this.books = resp.data;
})
}
vue在运行的时候一直报错,导致文件保存不了,原因是在你的.eslintrc.js文件中少加了一行“space-before-function-paren”: 0
打开你的这个.eslintrc.js文件,在rules里面加上"space-before-function-paren": 0
在data函数中,使用created方法,通过this.$axios.get来访问后台,参数就是我们要访问的接口路径,then后面跟的是回调函数,resp这个可以任意填写,代表的是get方法拿到的data数据,先将this赋给一个对象是为了在回调函数中使用,否则直接使用this,拿到的是当前回调函数的这个对象。这里只要接口返回的data数据,所以使用的resp.data.再将该对象赋给books,再去使用
遇到Elements in iteration expect to have 'v-bind:key' directives.' 这个错误
设置对应的key
在学习vue过程中遇到Elements in iteration expect to have 'v-bind:key' directives.' 这个错误,查阅资料得知Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须设置的。
注意上面key值不要用对象或是数组作为key,用string或number作为key,否则报错:[Vue warn] Avoid using non-primitive value as key, use string/number value instead.
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.serial}}</td>
</tr>
便可以拿到接口返回的数据,看效果
到此项目开发结束。 注意事项也写在里面了