SpringBoot+Vue+nginx项⽬部署（零基础带你部署）⼀、环境、⼯具
spring-boot
VSVode
vue
百度⽹盘(vue+springboot+nginx源码)：
⼆、搭建后台spring-boot框架
步骤：
1、new- project选择Spring Initializr next
2、创建项⽬⽂件结构以及jdk版本
3、选择项⽬需要的依赖
next然后finish
4、创建完毕的⽂件结构如图
5、对l更改，信息如下
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"
xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.zks</groupId>
<artifactId>myspringboot</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>ajax和axios使用实例
<name>myspringboot</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
&porting.outputEncoding>UTF-8</porting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId&batis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>vb程序设计练习册答案
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
接口测试主要流程</dependency>
<dependency>
<groupId>org.apachemons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.4</version>
</dependency>
<dependency>
<groupId>com.</groupId>
<artifactId>jackson-core</artifactId>
</dependency>
<dependency>
<groupId>com.</groupId>
<artifactId>jackson-databind</artifactId>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.datatype</groupId>
<artifactId>jackson-datatype-joda</artifactId>
</dependency>
<dependency>
<groupId>com.dule</groupId>
<artifactId>jackson-module-parameter-names</artifactId>
</dependency>
<!-- 分页插件 -->
jquery下载文件请求<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
<!-- alibaba的druid数据库连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.9</version>
</dependency>
<dependency>
<groupId&acle</groupId>
<artifactId>ojdbc14</artifactId>
<version>11.2.0.1.0</version>
</dependency>
</dependencies>
<build>
<resources>
<resource>
<directory>src/main/webapp</directory>
<targetPath>META-INF/resources</targetPath>
<includes>
<include>**/**</include>
</includes>
</resource>
<resource>
<directory>src/main/resources</directory>
<filtering>false</filtering>
单链表的基本操作<includes>
<include>**/**</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
注意：本项⽬⽤是连接oracle，使⽤其他数据库的请⾃⾏使⽤数据库连接dependency
6、在resources⽂件夹下删除application.properties⽂件并添加新的l⽂件，信息如下server:
port: 8080
spring:
datasource:
# url: jdbc:oracle:thin:@192.168.153.2:1521:orcl
username: admin
password: 123
driver-class-name: oracle.jdbc.driver.OracleDriver
mvc:
view:
prefix: /WEB-INF/
suffix: .jsp
mybatis:
mapper-locations: classpath:mapper/*.xml
configuration:
mapUnderscoreToCamelCase: true
logImpl: org.apache.ibatis.logging.stdout.StdOutImpl
7、更改项⽬启动类（DemoApplication）
package springboot;
batis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.zks.dao")
public class MyspringbootApplication {
public static void main(String[] args) {
SpringApplication.run(MyspringbootApplication.class, args);
}
}
右键运⾏启动类（DemoApplication），就可以成功启动
注意：可能会遇到⼀个问题：
maven版本过⾼3.6.2及以上可能也会出现该情况，就要降低版本了，我将3.6.3 -> 3.6.1版本重新编译，成功！
3.6.1下载：
项⽬结构请模仿此图
为了证明成功启动springboot，我们在controller写个main类，return⼀个页⾯，然后浏览器看看
ller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@RequestMapping(value = "/a/")
@Controller
public class Main {
@RequestMapping(value = "index")
public String main(){
return "index";
}
}
因为我们在l⽂件设端⼝为8080，浏览器访问：localhost:8080/a/index，即可看到页⾯
到这⾥后端springboot就写完了！
三：前端vue搭建
1. 打开cmd：npm init webpack jzc
搭建起来的项⽬结构如图：
2. vue中axios跨域请求后端接⼝
⼀，⾸先在⽂件中下载axios
cnpm install axios --save-dev
⼆、在main.js中引⼊及获取对象
import Vue from 'vue'
import Axios from 'axios'
Vue.prototype.$axios = Axios
三、在config⾥⾯的index.js⽂件⾥设置proxyTable
const path = require('path')
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/': {
target: 'localhost:8080',//此处可以换成⾃⼰需要的地址
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
},
此处的8080对应l⽂件中的
四、main.js⾥添加host
Vue.prototype.HOST = "/"
五、数据请求
import qs from 'qs';
this.$axios.post(this.HOST +'Jzcx/redOrBlack/second',qs.stringify({
page:1,
limit:2
})).then(res =>{
// console.log(res.data);
this.dataList = res.data.dataList;
loading.close();
})
如果不加上qs.stringify，axios默认请求会带上花括号，后端就拿不到前端传过来的参数，使⽤qs库去掉花括号qs使⽤：
npm install qs --save-dev
import qs from 'qs';
注意：配置⽂件后，要重新启动哦
到这⾥就可以使⽤axios
3. vue中使⽤jquery库
⼀、npm install jquery --save-dev
还要在引⼊popper.js，不然jq引⼊报错，两者有⼀定的关联
⼆、npm install popper.js --save-dev 还是 npm install popper --save-dev
都试⼀下
三、配置main.js，引⼊所需组件
import $ from 'jquery'
在f.js最上⾯引⼊
const webpack = require('webpack')
结果配置好了，npm run dev，webpack报错引⼊jQ时发⽣“'$' is defined but never used”
解决：注释掉f.js⾥的这段：
重新 npm run dev即可运⾏，这样jquery也可以使⽤了
4.使⽤scss预编译
⼀、⾸先安装依赖
npm install node-sass sass-loader --save-dev
其中的sass-loader我安装的时候是8.0.0，但是安装完后报错，好像是说版本太⾼，和其他不兼容，于是我就降低版本sass-loader:7.3.1、node-sass:4.13.0。
如果出现错误，可以尝试使⽤淘宝镜像安装解决：
然后使⽤cnpm 代替npm 安装node-sass和sass-loader。
安装好之后就可以在你的.vue⽂件中使⽤了：
⼆、到build中f.js，在rules中添加scss规则
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }
在vue⽂件中使⽤
<style lang='scss'> </style>
4.1 在vue项⽬全局中引⼊scss
全局引⽤时需要安装sass-resources-loader
npm install sass-resources-loader --save-dev
修改build中的utils.js
简单就是修改scss、sass使⽤的⽅法，将原本的generateLoaders⽅法换成⾃定义的generateSassResourceLoader⽅法即可
然后添加⼀个⽅法generateSassResourceLoader()
generateSassResourceLoader代码如下：
function generateSassResourceLoader() {
var loaders = [
cssLoader,
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
/
/ 多个⽂件时⽤数组的形式传⼊，单个⽂件时可以直接使⽤ solve(__dirname, '../static/style/common.scss'
resources: [resolveResource('theme.scss')]
}
}
];
if (act) {
act({
use: loaders,
fallback: 'vue-style-loader'nodejs增删改查
})
} else {
return ['vue-style-loader'].concat(loaders)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论