happymmail项目总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

1. vue如何跨域请求数据

1.创建vue项目 下载axios插件 cnpn i axios --save 然后引入axios

在项目中配置好axios环境

axios访问API接口，进行跨域访问是不可以的，需要配置代理

原因是：因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦

在 vue-cli 项目中安装 http-proxy-middleware 中间件作为代理

cnpm install -S http-proxy-middleware

1. 在 vue-cli 项目中找到 config 文件夹下的 index.js

   在 index.js 下的 module.exports 里找到 proxyTable{ }

   在 proxyTable{ } 下进行如下配置：

  "/api":{

​    target:"http://admintest.happymmall.com/manage",

​    changeOrigin:true,

​    pathRewrite: { 

​     '^/api': ''

​    }

   }

在 vue-cli 项目 src 文件夹下找到 HelloWorld.vue 其中的 axios 请求代码修改如下：

methods: {
// get跨域请求数据
getWeather() {
let _this = this;
// 原API接口 url 地址：https://www.baidu/xxx
// 就相当于 'https://www.baidu/xxx' == '/api'
var url ="/api"; // 这里就是刚才的config/index.js中的/api
 this.$http
   .get(url, {})
   .then(res => {
      console.log(res)
    })
   .catch(function(error) {
      console.log(error)
    })
}
}

因为在新版的 vue-cli 的 package.json 中 webpack-dev-server 没有设置 --open ,所以打开 package.json 文件在 ”scripts” 属性中的 ”dev” 属性中手动添加 --open

在 main.js 文件加一条指令：axios.defaults.baseURL = ‘/api’, 使每次请求都会带一个 /api 前缀

配置完成后在控制台中输入 npm run dev 重新启动

2. 文件上传功能

页面布局：设置两个均为100px的盒子，左侧是预览图（浏览上传的图片），右侧是操作图（input框占满盒子并隐藏起来，可以通过 opacity: 0来实现，给input绑定@change=‘showImg’事件，如果改变了就相当于input框的value值改变了，对应预览的图片 也应跟着改变，与此同时还可以给input框加一个ref属性 对右侧的加号图标绑定事件 ）

功能：右侧点击加号图标，左边可以预览图片，右侧点加号还可以继续修改

上传图片需要使用input框，可以利用type=‘file’这一属性打开电脑系统文件夹进行挑选图片

element ui 中的 el-upload组件

<el-upload
  class="upload-demo"
  name="upload_file"
  multiple
  :limit="3"
  action="/api/product/upload.do"
  :on-preview="handlePreview"
  :before-remove="beforeRemove"
  :on-success ="handleSuccess"
  :on-exceed = "handleExceed"
  :before-upload = "beforeAvatarUpload"

><img class="image" :src="form.imageHost+form.subImages" alt="">
><el-button size="small" type="primary">点击上传</el-button>

</el-upload>

methods:{
  handlePreview(file){
     console.log(file)
     // 相对地址
     this.form.subImages = file.response.data.uri;
  },
  beforeRemove(file, fileList){
     console.log(file, fileList)
     return this.$confirm(`确定删除${file.name}`)
  },
  handleSuccess(response, file, fileList){
   console.log(response)
   console.log(file)
   console.log(fileList)
  this.form.subImages = file.response.data.uri;
  },
  handleExceed(files, fileList){
  	console.log(files)
  	this.$message.warning(`当前限制选择3个文件，本次选择了${
  		files.length
  	}个文件,共选择了${files.length + fileList.length}个文件`)
  	},
},

// 限制图片类型及大小
beforeAvatarUpload(file) {
  console.log(file)
  console.log(file.name)
  // 原生js能力   msg文件的后缀名
  let msg = file.name.substring(file.name.indexOf('.')+1)
  // console.log(msg)
  const extension = msg === 'jpg';
  const extension2 = msg === 'png';
  // 2M  size 文件的大小
  const size = file.size / 1024 /1024;
  console.log(size)

  if (!extension && !extension2) {
  	this.$message({
  	message:"上传文件只能是 jpg、png格式",
  	type:"warning"
  	})
  }
  if ( size>= 2) {
  	this.$message({
  	message:"上传文件大小不能超过2MB！",
  	type:"warning"
  	})
  	return
  }
  return extension || extension2
},
}

最后：使用产品更新接口 更新产品相应信息
updataComm()

3.富文本编辑器quill-editor的使用

下载cnpm install vue-quill-editor --save

全局引入：
在文件：main.js
import VueQuillEditor from ‘vue-quill-editor’
require styles 引入样式
下面三行必须要写
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’

Vue.use(VueQuillEditor)

局部引入方式：

	<script>
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import { quillEditor } from "vue-quill-editor";
  </script>
  ```
<quill-editor
  v-model="form.detail"
  :options="editorOption"
  @change="onEditorChange($event)"

></quill-editor>

content: ‘

I am quill-edit Example

’,
onEditorChange(v) {
console.log(v.text);
this.form.detail = v.text;
},

4. aixos的二次封装

axios的二次封装

将axios封装成一个公共的函数公布出来 函数返回一个promise对象 在promise对象resolve返回接口数据
在src目录下创建utils文件夹 在utils下创建request.js文件

axios({可配置选项对象})

引入axios import axios from “axios”

配置基本路径和超时时间
const service = axios.create({
baseURL:‘/api’,
timeout:3000
})

axios拦截器 请求拦截 响应拦截
service.interceptors.request.use((config) =>{
判断登录成功 请求头中添加token
if (store.getters.token) {
让每个请求携带token-- [‘Token’]为自定义key 请根据实际情况自行修改
config.headers[‘token’]
}
return config
}}
service.interceptors.response.use((config) =>{
//响应拦截的具体逻辑

return config 

})
// 封装成一个公共的函数 公布出来 函数返回一个promise对象
// params 是形参对象 接收的是实参-对象

let Request = (params) =>{
	// console.log(params)
	return  new Promise((resolve,reject) =>{
		axios({
	    url: baseURL+url,
	     method: "get" || "post" ,
	   get传参
	    params:{
	         username:"admin",
	        passwrod:"admin"
	    },
	   post传参
	    data:{
	         username:"admin",
	         passwrod:"admin"
	    }
	 })

	service({
		...params //es6中对象解构赋值   
	}).then((res) =>{
		// console.log(res)
		resolve(res)
	}).catch((err) =>{
		reject(err)
	})
})
}
export { Request}

5.接口的统一配置文件

在utils下再建一个http.js文件

统一的接口配置文件： 便于后期的修改、维护

引入request.js文件

import {Request} from “./request”

统一的接口

// 登录
export const login=(obj)=>Request({
  url:`/api/user/login.do`,
  method:"post",
  params:obj
})

// 主页接口数据
export const about=()=>Request({
  url:`/api/statistic/base_count.do`,
  method:"get",
})

// 用户列表
export const lists=(obj)=>Request({
  url:`/api/user/list.do`,
  method:"post",
  params:obj
})

// 商品管理
export const goods=(obj)=>Request({
  url:`/api/product/list.do`,
  method:"post",
  params:obj
})

// 商品上下架
export const updateStatus=(data)=>Request({
  url:`/api/product/set_sale_status.do`,
  method:"post",
  params:data
})

// 商品管理-搜索
export const searchName=(data)=>Request({
  url:`/api/product/search.do`,
  method:"post",
  params:data
})

// 商品详情页
export const detail=(data)=>Request({
  url:`/api/product/detail.do`,
  method:"get",
  params:data
})

// 更新修改商品
export const updated = (obj) => Request({
  url: "/api/product/save.do",
  method: "get",
  params: obj
})

// 品类接口
export const grades=(obj)=>Request({
  url:`/api/category/get_category.do`,
  method:"get",
  params:obj
})

// 品类修改名称接口
export const renames=(obj)=>Request({
  url:`/api/category/set_category_name.do`,
  method:"get",
  params:obj
})

// 订单管理
export const orders=(obj)=>Request({
  url:`/api/order/list.do`,
  method:"get",
  params:obj
})

// 订单搜索
export const orderSearch=(obj)=>Request({
  url:`/api/order/search.do`,
  method:"get",
  params:obj
})

// 订单详情
export const orderDetail=(obj)=>Request({
  url:`/api/order/detail.do`,
  method:"get",
  params:obj
})

6.element-ui按需加载

首先下载cnpm i element-ui -S
安装 babel-plugin-component：
cnpm install babel-plugin-component -D
将 .babelrc 修改为：

	{
	"presets": [["es2015", { "modules": false }]],
	"plugins": [
		[
		"component",
		{
			"libraryName": "element-ui",
			"styleLibraryName": "theme-chalk"
		}
		]
	]
	}

7.项目打包

做完所有配置，我们在根目录下，命令行执行 npm run build 打包项目 打包安装 相当于静态资源（其实就是打包出我们的 npm库）

会出现一个dist文件夹

文件夹下有两个js文件

load-more.js

load-more.js.map