【项目部署】解决跨域的前后端分离部署

部署步骤

1.启动nginx   -->配置开机启动

vim /usr/local/nginx/conf

nginx.conf配置添加跨域

location / {

root   /usr/local/nginx/dist;

index  index.html index.htm;

try_files $uri $uri/ /index.html?s=$uri&$args;

}

location ^~ /equipment {

proxy_pass  http://localhost:8081;

}

2.启动redis

3.跨域控制层方法必须加  @CrossOrigin

4.部署时  vue  axios前置请求换成  axios.defaults.baseURL="http://xxx:8081"

5.springboot打包jar包，无需修改启动类（部署tomcat需要）

jdbcURL路径

url: jdbc:mysql://localhost:3306/blog?useUnicode=true&serverTimezone=UTC

pom依赖

0.0.1-SNAPSHOT

jar     /*打包成jar包*/

vueblog   /*jar包名*/

org.springframework.boot

spring-boot-maven-plugin

       /*添加此依赖*/

true

6.使用npm run build打包前端dist即可，可不打包成静态资源

7.阿里云上传指令

前端vue

source /etc/profile

jps   -ml. |grep  dist |xargs. kill

nohup java -jar /usr/local/nginx/dist > nohup.log 2>&1 &

后端springboot

source /etc/profile

jps   -ml. |grep  shirodemo |xargs. kill

nohup java -jar /myprojectjar/shirodemo.jar > nohup.log 2>&1 &

8.配置一致的数据库名和表，mysql

username: user

password: ******

9.花生壳在centos自启动

10.解决部署保存数据乱码

帮助文档

vue启动前：

npm run build

启动：

npm run serve

技术栈

技术栈

前端：vue

elementui

axios

后端：

Spring Boot

MyBatis plus

Shiro

redis

jwt

hibernate validatior

FastDFS

开发步骤：Spring Boot整合MyBatis plus

Spring Boot整合FastDFS，实现文件上传

注册接口开发

MyBatis plus代码生成

整合Shiro+redis，实现会话共享

Shiro整合jwt，进行身份校验

统一结果封装

实体校验

解决跨域问题

登录接口开发

博客接口开发

编辑博客接口开发

个人资料修改接口开发

shiro校验

校验密码--->抛出异常

正常则jwt身份凭证

生成Jwt-->

shiro分为正常和异常状态

异常：过期等，密码错误

正常：注解前置拦截过滤，注解，无权限--异常；有权限--调用接口

创建vue项目选择

router

vuex

安装elementui

cnpm  install element-ui --save

src目录下的main.js，引入element-ui依赖。

import Element from 'element-ui'

import "element-ui/lib/theme-chalk/index.css"

Vue.use(Element)

启动

npm run serve

或者配置启动

安装axios

cnpm install axios --save

基于Vue的markdown编辑器mavon-editor

cnpm install mavon-editor --save

然后在main.js中全局注册：

// 全局注册

import Vue from 'vue'

import mavonEditor from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

// use

Vue.use(mavonEditor)

解析md文件

# 用于解析md文档

cnpm install markdown-it --save

# md样式

cnpm install github-markdown-css

卸载

# 用于解析md文档

cnpm uninstall  markdown-it --save

# md样式

cnpm uninstall  github-markdown-css

*功能新增

未登录用户不能编辑（目前前端路由拦截不成功20.9.3），完成

增加我的博客并提供查看和修改    ，完成

通过FastDFS实现上传下载

添加个人资料的修改

按时间，按推荐显示博客

主页内容新增轮播展示，摄影作品分享

使用RabbitMQ做消息分发

nginx配置

nginx没有启动,则为   Network Error

再通过反向代理配置

location / {

root   /usr/local/nginx/dist;

proxy_pass http://localhost:8081;   //配置的后端

index  index.html index.htm;

try_files $uri $uri/ /index.html?s=$uri&$args;

}

或者

location / {

root   /usr/local/nginx/dist;

index  index.html index.htm;

try_files $uri $uri/ /index.html?s=$uri&$args;

}

location ^~ /equipment {

proxy_pass hhttp://localhost:8081;

}

https://zhuanlan.zhihu.com/p/60108135

我的目录

cd /usr/local/nginx/sbin

查看运行端口

ps aux|grep nginx

kill  端口号

1.先停止再启动（推荐）： 对 nginx 进行重启相当于先停止再启动，即先执行停止命令再执行启动命令。如下：

./nginx -s quit

./nginx

重新启动

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

生成snapshot.jar文件,上传到linux服务器，运行后台，java -jar xxx.jar

java -jar vueblog.jar

centos安装redis

一、安装gcc依赖

由于 redis 是用 C 语言开发，安装之前必先确认是否安装 gcc 环境（gcc -v），如果没有安装，执行以下命令进行安装

[root@localhost local]# yum install -y gcc

二、下载并解压安装包

[root@localhost local]# wget http://download.redis.io/releases/redis-5.0.3.tar.gz

[root@localhost local]# tar -zxvf redis-5.0.3.tar.gz

三、cd切换到redis解压目录下，执行编译

[root@localhost local]# cd redis-5.0.3

[root@localhost redis-5.0.3]# make

四、安装并指定安装目录

[root@localhost redis-5.0.3]# make install PREFIX=/usr/local/redis

五、启动服务

5.1前台启动

[root@localhost redis-5.0.3]# cd /usr/local/redis/bin/

[root@localhost bin]# ./redis-server

5.2后台启动

从 redis 的源码目录中复制 redis.conf 到 redis 的安装目录

[root@localhost bin]# cp /usr/local/redis-5.0.3/redis.conf /usr/local/redis/bin/

修改 redis.conf 文件，把 daemonize no 改为 daemonize yes

[root@localhost bin]# vi redis.conf

后台启动

查看启动端口

ps -ef |grep redis

[root@localhost bin]# ./redis-server redis.conf

六、设置开机启动

添加开机启动服务

[root@localhost bin]# vi /etc/systemd/system/redis.service

复制粘贴以下内容：

[Unit] Description=redis-server After=network.target

[Service] Type=forking ExecStart=/usr/local/redis/bin/redis-server /usr/local/redis/bin/redis.conf PrivateTmp=true

[Install] WantedBy=multi-user.target

注意：ExecStart配置成自己的路径

设置开机启动

[root@localhost bin]# systemctl daemon-reload

[root@localhost bin]# systemctl start redis.service

[root@localhost bin]# systemctl enable redis.service

创建 redis 命令软链接

[root@localhost ~]# ln -s /usr/local/redis/bin/redis-cli /usr/bin/redis

测试 redis

服务操作命令

systemctl start redis.service  #启动redis服务

systemctl stop redis.service  #停止redis服务

systemctl restart redis.service  #重新启动服务

systemctl status redis.service  #查看服务当前状态

systemctl enable redis.service  #设置开机自启动

systemctl disable redis.service  #停止开机自启动

跨域拦截

vue+已拦截跨源请求：同源策略禁止读取位于 http://192.168.43.168:8080/category/list 的远程资源。CORS 头缺少 'Access-Control-Allow

vue访问Java后台时候出现

@CrossOrigin 加一个这个注解就可以

@RequestMapping("/list")

@CrossOrigin

public PagedResult getlist(@RequestParam(value = "pageNum",defaultValue = "1") int pageNum,@RequestParam(value = "pageSize",defaultValue = "10") int pageSize){

PagedResult categoryPagedResulte=categoryService.getList(pageNum,pageSize);

return categoryPagedResulte;

}

vue配置axios 跨域

import axios from 'axios'

Vue.prototype.$ajax = axios

// Vue.prototype.$ajax = axios

Vue.config.productionTip = false

// axios 配置

axios.defaults.timeout = 5000;

// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

// axios.defaults.headers.post['Content-Type'] = 'json';

// axios.defaults.baseURL = 'http://localhost:8080/项目名/';

axios.defaults.baseURL = 'http://192.168.43.168:8080/';

Spring Boot web前端 Spring Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。