一 编写后端接口

    /**
     * 登录方法
     * @param request  HTTP请求
     * @param response HTTP响应
     * @return 返回消息
     */
    @PostMapping("/api/login")
    public ReturnMessage testYanZheng( @RequestBody User user, HttpServletRequest request, HttpServletResponse response) {
       
    }

二 安装并使用axios
1.安装axios: npm install axios
2.使用axios
main.js文件中引入axios:

import axios from 'axios'
Vue.prototype.$axios = axios

在项目需要调用后端接口处使用:

      axios.post('/api/login',
            {
              username:'',
              password:''
            },
            )
            .then(function(response){
              if(response.data.code===999){
              alert("用户名或密码错误")
            }
            })
            .catch(function(error){
              alert(error)
            }) 

三 解决跨域问题
使用proxyTable解决开发环境中跨域问题
config/index.js:

  proxyTable: {
      "/api":{
        target:"http://127.0.0.1:8089",
        changeOrigin: true,
        pathRewrite:{
          "/api":"/api"
        }
      }

四 关于content-type
1.application/x-www-form-urlencoded
2.multipart/form-data
3.application/json
4.text/xml
目前只使用到json格式,后端用@RequestBody接收前端参数。

五 vue前端项目打包部署
1.修改相关配置
config/index.js:
assetsPublicPath 属性从’/’ 改为 ‘./’
在这里插入图片描述
build/util.js:
添加 publicPath: ‘…/…/’
在这里插入图片描述
2 运行npm run build命令,产生一个dist文件夹。
在这里插入图片描述3nginx 部署
(1) 配置nginx环境变量
在这里插入图片描述
(2)配置项目路径
在这里插入图片描述
(3)dist文件夹中的两个文件拷贝到nginx的html目录下,里面默认的两个文件删掉。
在这里插入图片描述
(4)启动nginx ,输入网址localhost,成功启动项目。
start nginx:启动nginx
nginx -s reload :修改配置后重新加载生效
nginx -s quit:停止nginx
npm install -g rimraf 安装
rimraf node_modules 删除node_modules

Logo

前往低代码交流专区

更多推荐