关于vue项目前后端打通

Posted 2021-02-19 cquccy

前端IDE： VSCODE   项目框架 VUE  

后端IDE : ECLIPSE   项目框架 spring boot

1.本地(windows)安装了一个mysql8，中间因为路径中存在中文，一直有问题，后面采用全英文路径没有出现问题

2.因为前端和后端用的服务不是同一个，所以需要配置跨域访问

前端 ： http://localhost:8080/#/mysoft
====================文件内容===============
<template>
<div class="mysoft">
<h1>软件整理</h1>
<ul>
<li>软件名称<input id="softwarename" v-model="softwarename" type="text" placeholder="请填写软件名称"/></li><br/>
<li>版本号 <input id="version" v-model="version" type="text" placeholder="请填写版本号"/> </li><br/>
<li>软件路径<input id="binpath" v-model="binpath" type="text" placeholder="请填写软件路径"/></li> <br/>
<li>安装配置说明路径<input id="cfgnotepath" v-model="cfgnotepath" type="text" placeholder="请填写安装配置说明路径"/></li><br/>
<li>使用感受路径<input id="usenotepath" v-model="usenotepath" type="text" placeholder="请填写使用感受路径"/></li><br/>
<li>获得渠道 <input id="channelname" v-model="channelname" type="text" placeholder="请填写获得渠道"/> </li>
</ul>
<button @click="handleRoute" id="submit">提交</button>
</div>
</template>
<script>
export default {
name: ‘mysoft‘,
data () {
return {
softwarename : "",
version : "",
binpath: "",
cfgnotepath : "",
usenotepath : "",
channelname: ""
}
},
methods:{
handleRoute:function(){
this.$axios.post(‘/api/soft/insertInfo‘,
{
"softwarename":softwarename.value,
"version":version.value,
"binpath":binpath.value
},
{emulateJSON:true}).then(
function(res){
binpath.value = res.data;
console.log(res.status);
}).catch(function(err){
console.log(err)
}
) ;
}
}
}
</script>
===============config->index.js=====跨域配置，否则无法访问服务==========================
。。。
proxyTable: {
‘/api‘:{
// target:‘http://jsonplaceholder.typicode.com‘,
target:‘http://localhost:8000‘,
changeOrigin:true,
pathRewrite:{
‘/api‘:‘‘
}
}
},
。。。
=============================================================

后端：
http://localhost:8000/soft/insertInfo

顺利插入两条记录，如下：

mysql> select * from software_collection;
+--------------+---------+---------+-------------+-------------+--------+-------------+---------------------+---------------------+
| softwarename | version | binpath | cfgnotepath | usenotepath | status | channelname | inputdate | updatedate |
+--------------+---------+---------+-------------+-------------+--------+-------------+---------------------+---------------------+
| vue | 1.0.0 | info | NULL | NULL | NULL | NULL | 2020-05-09 11:21:20 | 2020-05-09 11:21:20 |
| wireshark | 1.0.0 | mypath | NULL | NULL | NULL | NULL | 2020-05-11 16:51:00 | 2020-05-11 16:51:00 |
+--------------+---------+---------+-------------+-------------+--------+-------------+---------------------+---------------------+

 

后端目录结构：
D:work20200506ccy1.0srcmain>tree /f
卷 新加卷 的文件夹 PATH 列表
卷序列号为 BA81-13D2
D:.
├─java
│ └─com
│ └─ccy
│ │ Application.java
│ │
│ ├─config
│ │ MybatisConfig.java
│ │ SwaggerConfig.java
│ │
│ ├─controller
│ │ SoftController.java
│ │
│ ├─dao
│ │ SoftCollMapper.java
│ │
│ ├─dto
│ │ SoftInfoDto.java
│ │
│ ├─dtoToModel
│ │ SoftInfoDtoToSoftColl.java
│ │
│ ├─mapping
│ │ SoftCollMapper.xml
│ │
│ ├─model
│ │ SoftColl.java
│ │ SoftCollKey.java
│ │
│ └─service
│ │ SoftInfoService.java
│ │
│ └─impl
│ SoftInfoServiceImpl.java
│
└─resources
application.yml
banner.txt

3.中间出现不能访问的时候还是用了调试 chrome

在launch.json中配置修改为如下
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}/src",
"url": "http://localhost:8080/#/mysoft",　
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}

启动chrome使用
"C:Program Files (x86)GoogleChromeApplicationchrome.exe" --remote-debugging-port=9222