提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、vue-cli2脚手架
1.vue-cli 脚手架自带引用路由
2.npm install -g vue-cli（搭建桥梁）
3.查看版本号：vue -V
4.初始化项目：vue init webpack ‘项目名字’
5.启动项目：npm run dev
二、配置跨域
1.引入库
在config.index.js文件中配置
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 配置代理
proxyTable: {
"/api":{
target:'http://admintest.happymmall.com/manage',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
host: '127.0.0.1',
port: 8888,
2.axios的二次封装
在src的根目录下创建plugin文件夹，创建request.js
1.需先下载axios，再引入import axios from ‘axios’
代码如下（示例）：
import axios from "axios"
// axios的二次封装 封装成一个公共的函数 公布出来 函数返回一个promise对象
const service = axios.create({
// baseURL:'/api',
// timeout:3000
})
// axios拦截器 请求拦截 响应拦截
service.interceptors.request.use((config) =>{
// // 判断登录成功 请求头中添加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}3.接口的统一配置文件
在src的跟目录下创建request文件夹，创建http.js
需引入axios封装
import { Request } from "../plugin/request";
// 登录
export const login=(obj)=>Request({
url:'/api/user/login.do',
method:"post",
params:obj
})4.element.js按需引入
在src的根目录下创建element.js，安装element.js依赖包
在main.js中引入
然后在element.js中使用哪个就引入哪个
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);5.登录鉴权
在main.js中全局引入
全局路由首位分为两种beforeEach() afterEach()
如果没有登录时不能跳转使用全局路由首位
router.beforeEach((to, from, next) => {
// 设置title
document.title = `${to.meta.title}`
const role = localStorage.getItem('submit')
// 字符串转对象
const val = JSON.parse(role)
console.log(val);
// 没有登录 跳转到登录页
if (!val && to.path !== '/') {
alert('请登录')
next('/')
}6.设置登录过期
if(val!==null){
const timeEnd=Date.now()-val.time
if(timeEnd>val.expire){
localStorage.removeItem('submit')
next('/login')
return null
}
}
next()
})7.vue-cli富文本编辑器
1.先安装依赖包:npm install vue-quill-editor
2.在main.js中引入富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
2.在需要的组件中引入富文本
import { quillEditor } from 'vue-quill-editor'
3.注册组件components: {quillEditor}
4.在视图中使用富文本编辑器
<quill-editor
：content=“content”
:options="editorOption"
@change="onEditorChange($event)"
/>
5.所需要的的配置
data（）{
return{
content：'',
editorOption:{}
}
},
6.在方法中调用
onEditorChange（{quill，html，text}）{
console.log（‘editor change！’，quill，html，text）；
this.content=html
}
8.图片上传
element-ui上的文件上传
//视图中
<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>
//script
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;
},
9.分页
1.在src的根目录下创建一个公共组件commont文件夹，再创建pagination.vue,里面放置分页的内容
2.在需要的组件中引入公共组件
3.在组件中通过子传父的方式，在父组件的子组件标签上定义事件，然后调用需要的方法，在子组件的标签上通过this.$emit来触发父组件定义的事件
4.在父组件的子组件标签上绑定属性（total，pagesize，pagenum），挂载要传输的数据，子组件通过props来接收数据
10、商品的添加
点击添加的时候跳转页面，在页面中有input中v-model中绑定的属性，添加的时候需要把v-model绑定的属性添加上去，最后调用商品添加的接口，添加成功跳转页面，即修改页面一样
submit（）{
addproduct（this.form）.then(res=>{
this.$message（{
message：res.data.data
type:'success'
this.$router.push('/product')
}）
}
}
10.商品的搜索
对搜索进行判断，对数组中数据进行id查询和名字查询
调用商品搜索的接口，最后在渲染总条数和页面search（）{
if（this.region=='productName'）{
this.suibian='productName'
}else{
this.suibian='productid'
}
调用接口
sousuo（{【this.suibian】：this.name,pagenum:this.pagenum}）.then（res>{
this.list=res.data.data.list
this.tottal=res.data.data.total
}）
}
11.分类
一级分类
fenlei（）.then（res=>{
this.regionchange1=res.data.data
}）二级分类
eryi（v）{
this.regionchange1.map（（item，index）=>{
if（v==item.name）{
fenlei（{regionchange1：item.id}）.then（res=>{
this.regionchange2=res.data.data
}）
}
}）
}
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
扫一扫
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
