【创建前后端】

• npm install -g vue-cli (全局安装一起搭建过的可以不用)

• vue init webpack demo(这个是项目名)

• npm install (初始化这里会自动下载node_modules)

• 然后就可以执行运行命令了npm run dev

When allowCredentials is true, allowedOrigins cannot contain the special value "*“since that cannot be set on the “Access-Control-Allow-Origin” response header. To allow credentials to a set of origins, list them explicitly or consider using"allowedOriginPatterns” instead.
翻译如下：

src下创建 axios/indx.js

// services/global.js"
import axios from 'axios'
import { Message, Loading } from 'element-ui'
let loadingInstance = null

// 初始化实例
let http = axios.create({
// 请求超时时间
  baseURL: '',
  timeout: 7000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

http.interceptors.request.use((config) => {
  loadingInstance = Loading.service({
    lock: true,
    text: 'loading...'
  })
  return config
}, (error) => {
  return Promise.reject(error)
})

// 响应拦截器
http.interceptors.response.use((response) => {
  loadingInstance.close()
  return response
}, (error) => {
  console.log('TCL: error', error)
  const msg = error.Message !== undefined ? error.Message : ''
  Message({
    message: '网络错误' + msg,
    type: 'error',
    duration: 3 * 1000
  })
  loadingInstance.close()
  return Promise.reject(error)
})

// 封装axios的post请求
http.post = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.post(url, params).then(response => {
      resolve(response.data)
    }).catch(err => {
      reject(err)
    })
  })
}
// 封装axios的apisPost请求
http.apisPost = (url, params) => {
  url = '/apis' + url
  return http.post(url, params)
}

// 封装axios的get请求
http.get = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.get(url, params).then(response => {
      resolve(response.data)
    }).catch(err => {
      reject(err)
    })
  })
}
// 封装axios的apisGet请求
http.apisGet = (url, params) => {
  url = '/apis' + url
  return http.get(url, params)
}
export default http

注意：因为在文件中使用了额外的axios和element-ui模块信息，需要使用npm进行更新。

进入项目目录，运行命令（idea工具也可以操作，看自己的习惯）

npm install --save axios element-ui

在config/index.js中配置代理转发，找到proxyTable项，添加请求的后端代理信息。

​
'/apis': {
    target: 'http://localhost:8015', // target host 本人后端接口（本地电脑IP）地址
    changeOrigin: true, // needed for virtual hosted sites
    pathRewrite: {
    '^/apis': '' // rewrite path
    }
}

​

main.js文件添加

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axiosHttp from './axios/index'

Vue.config.productionTip = false

/* 全局注册，使用方法为:this.$axiosHttp */
Vue.prototype.$axiosHttp = axiosHttp

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

axios请求方式  // 加apis是请求跨域的

this.$axiosHttp.apisPost('/main').then(data => {
      this.result = data
    })

后端相关问题

解决办法：跨域配置报错，将.allowedOrigins替换成.allowedOriginPatterns即可。

修改前：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 开启跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 允许跨域请求的域名
                .allowedOrigins("*")
                // 是否允许证书（cookies）
                .allowCredentials(true)
                // 允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }

}

修改后：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 开启跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许证书（cookies）
                .allowCredentials(true)
                // 允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

报错:

Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.

# 下面的配置设置了debug级别及以上级别的信息会输出到SpringBoot控制台
# 配置含义为cn.tedu.knows.portal包下的所有类的输出日志级别设置为debug
# MyBatisPlus将运行的sql语句设置在了debug,所以控制台会出现sql语句了
logging.level.com.tianming.wotian=debug

启动类

@SpringBootApplication
@MapperScan("com.tianming.wotian.mapper")
public class WotianApplication {

    public static void main(String[] args) {
        SpringApplication.run(WotianApplication.class, args);
    }

}

后端传给前端后几位数字变为0问题

当后端为Long类型的数字传给前端，在Postman里面是正常的，但前端页面取到的后几位数字变为了0

Javascript的Number 类型最大长度是17位Java的long类型长度是19位

解决方法

Java后台使用String类型替换Long类型

使用 @JsonSerialize(using = ToStringSerializer.class) 注解

vue popconfirm气泡确认框事件相关

<el-popconfirm @confirm="function_ok()" @cancel="function_cancel()">
    <el-button slot="reference">删除</el-button>
</el-popconfirm>

打包相关

打包配置pom

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>1.3.5.RELEASE</version>
                <configuration>
                    <mainClass>com.tianming.wotian.WotianApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <!--   出现Failed to execute goal org.apache.maven.plugins:maven-resources-        
             plugin:3.2.0:resources (default-resources) on project wotian: Input length =                     
             1 -> [Help 1]报错 更换版本     -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <version>2.6</version>
            </plugin>
        </plugins>
    </build>

打包前端问题：

1 2 3

Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.

解释：

npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,执行npm run build 命令后，会生成dist目录，里边包含index.html和static文件夹。

npm install -g http-server

Nginx服务实现跨域

conf的nginx.conf配置文件

server {
        listen       8016;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		#前端路径
        location / {
            root   E:\IdeaProjects\wotian-web\dist;
            index  index.html index.htm;
        }
		#请求apis的跨域地址
		location /apis {
              proxy_pass http://localhost:8013/;
		}
}

nginx常用的指令

start nginx           启动nginx
nginx -s stop        快速关闭nginx
nginx -s reload     改变了Nginx相关配置，需要重新加载配置而重载。

nginx里的正则

~：    区分大小写
~*：   不区分大小写
^~:    非精确匹配
=:     精确匹配