阅读 545

vue-admin 详细注释,必须手把手做项目系列之(三)丢到服务器中解决报错

系列文章

前言

  • 系列三将会把我们写好的项目放到服务器中,模拟和后台对接的场景
  • 我们将会放到phpstudy中,简单易懂。下载链接:[phpstudy.php.cn/]
  • 系列三中我们会来看看放到服务器中,会有哪些问题,然后解决它。

phpstudy的使用

  • 下载解压之后,我们要找到www目录,把我们打包的vue文件放入www目录下
  • 然后我们启动phpstudy,你会看到如下界面

  • 启动成功的界面

各种报错

  • 然后我们在浏览器中输入localhost/dist之后会报错,路径错误,找不到css/js文件
  • 是因为我们在用webpack打包时在,config/index.js文件中,配置的assetsPublicPath: '/',这是默认配置,
  • 我们只需要修改成assetsPublicPath: './',就可以了
  • 修改之后,我们重新输入localhost/dist,就可以正常访问了
  • 然后我们点击登录,发现没有反应,控制台报错,报错如下:
  • 从报错信息看,我们没有起接口服务,然后我们起接口服务: [图片]
  • 上图的报错信息图片报404是楼主的项目login页面的一张图片,在这里做演示。我们可以在控制台中看到,图片路径,和接口都不对。
    • 图片的错误是phpstudy在访问地址时,默认的访问localhost/static/-----而我们static是dist 目录下的,所以要加dist。
    • 楼主这里修改的就比较简单粗暴了,我们在“图片一中”直接在phpstudy中的“其他选项菜单”中,选择“phpStudy设置”中的“端口常规设置”中的“网站目录”中加了一个 dist,这样就解决这个问题了,(ps:这里只做模拟演示,碰到这种情况我们就会去针对处理,而不是摸不着头脑)
    • 我们在“图片二”中,不使用本地代理,因为官方文档中proxyTable{},只在开发环境中可以用,这时候我们直接换成我们全部的接口地址,这样解决了这个问题,就可以正常登陆了。同时,我们在main.js中可以配置axios的拦截器,简化我们写这么长的url地址。(详情见系列一,二)这里“贴一段代码示例”
  • 图片一:
  • 图片二:
  • 贴一段代码示例

// 把axios对象绑定到Vue原型中
Vue.prototype.axios = axios

// 给axios配置拦截器

// 添加请求拦截器,拦截器的作用:
// 在拦截器中可以获取到axios的配置,在config中修改东西
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // console.log('哈哈,我拦截到了请求', config)
  // 只需要给config配置baseURL 以及 headers
  config.baseURL = 'http://localhost:8888/'
  config.headers.Authorization = localStorage.getItem('myToken')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
// 配置axios的通过配置
// axios.defaults.baseURL = 'http://localhost:3000/login'
// axios.defaults.headers.common['Authorization'] = localStorage.getItem('myToken')
复制代码
  • 这样我们就可以愉快地简化我们,请求的url地址了,如下:
          // 发送axios请求
          const res = await this.axios({
            method: 'post',
            url: 'login',//直接写login而不用写http://localhost:8888/login了,因为我们配置了baseURL
            data: this.form
          })
复制代码

结语

  • 楼主本来想用php写接口,奈何时间有点忙,只能等后续了。。。。
  • 这个模板项目的页面不是很多,我们把基础架构搞懂之后,其实后面就是板砖了,无论是响应式,还是加上一些特效,或使用h5,c3等等,这个就看项目需求了,你会了1,后面的0你就有谱了,那得你自己加油了。
  • 同时,项目优化中,我们可以做一些axios封装,组件的各种抽离等等的优化,这些自己百度下子,因为别人写的很不错。多查查,多看看,总会有收获,学习莫慌,多读书,
  • 后续楼主,会写react,小程序,一些js的数据结构与算法中经典的详解