vue项目——记录出现的问题和解决办法

不同的请求方式：post， get  不同的数据：多媒体（文件），json对象，普通属性 不同的组件：element UI 原生dom

请求头都不一样

渲染数据

发送请求的方式

做项目过程记录

---

vue外链bootstrap和css样式和js的方式

写在index.html文件中

 

前端解决跨域问题

关闭语法检查

 vue.config.js

 

改变前端端口

package.json

配置全局的通用公共组件

三部曲：引入、注册、使用

main.js

组件、router路由、vuex（状态管理）、element-UI组件、icon图标、Axios （网络请求库）

 

 

路由

router/index.js

配置路由守卫、子级路由、带参数的路由、懒加载、激活的页面

Vuex 状态管理库

创建store对象：{state状态，mutations指定修改state数据的函数，actions提交mutation，getters计算属性（会改变的数据） }

工具类request.js封装axios成一个函数

加时间戳防止请求缓存、响应拦截器、允许携带cookie、默认url前缀、请求头类型

import axios from 'axios'
import qs from 'qs'
/**
 * axios的传参方式：
 * 1.url 传参 一般用于Get和Delete 实现方式：config.params={JSON}
 * 2.body传参 实现方式：config.data = {JSON}，且请求头为：headers: { 'Content-Type': 'application/json;charset=UTF-8' }
 * 3.表单传参 实现方式：config.data = qs.stringify({JSON})，且请求头为：且请求头为：headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
 */
// axios实例
const $http = axios.create({
	baseURL: 'http://localhost:8888/api/',
	timeout: 60000,
	//key/value键值对
//	headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
	//默认 json
		headers: { 'Content-Type': 'application/json;charset=UTF-8' }

})
 
// 请求拦截器
$http.interceptors.request.use(
	(config) => {
		// 追加时间戳，防止GET请求缓存
		if (config.method?.toUpperCase() === 'GET') {
			config.params = { ...config.params, t: new Date().getTime() }
		}
		
		if (Object.values(config.headers).includes('application/x-www-form-urlencoded')) {
			config.data = qs.stringify(config.data)
		}
		return config
	},
	error => {
		return Promise.reject(error)
	}
)
 
// 响应拦截器
$http.interceptors.response.use(
	response => {
		const res = response.data
		return res
	},
	error => {
		return Promise.reject(error)
	}
)
 // CROS跨域是否允许凭证  设置一个全局的属性, 允许携带cookie
$http.defaults.withCredentials = true;

// 导出 axios 实例
export default $http

 axios的传参方式：

•  url 传参 一般用于Get和Delete 实现方式：config.params={JSON}
•  body传参 实现方式：config.data = {JSON}，且请求头为：

                headers: { 'Content-Type': 'application/json;charset=UTF-8' }

•  表单传参 实现方式：config.data = qs.stringify({JSON})，且请求头为：且请求头为：

                headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }

请求头

• 默认json

headers: { 'Content-Type': 'application/json;charset=UTF-8' }

• key/value键值对

headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }

如果是发送post请求  以登录为例

 login() {

            var that = this; // 函数内的this指向函数 没有指向data
            that.$axios.post("vuelogin", {
                username: that.username,
                password:that.password
            })
                .then(function (response) {
                    console.log(response)
                    //处理成功情况
                    if (response.meta.status === 200) {
                        //保持token到本地
                        let admin = response.data;
                        localStorage.setItem("token", admin.username);
                        //跳转页面
                        that.$router.push({
                            name: 'home',
                            query: {
                                username: admin.username
                            }
                        });
                    } else {
                        that.user = "";
                        that.password = "";
                        alert(response.meta.msg);
                    }
                })
                .catch(function (error) {
                    //处理错误情况
                    console.log(error);
                    alert("服务器出错..")
                })
        }

  后端编码处理 响应返回json类型

request.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=UTF-8");

可以用request.获取参数

 String user = request.getParameter("username");

如果是带文件上传的post请求

改变请求头

   addUser() {
            var that = this;
            let newUser = {
                name: that.user.name,
                sex: that.user.sex,
                qq: that.user.qq,
                email: that.user.email,
                age: that.user.age,
                address: that.user.address,
                
                headSrc: that.user.headSrc,
            }
            //console.log(newUser);
            //使用post传值
            that.$axios.post("vue/add", newUser, {headers: { 'Content-Type': 'multipart/form-data' }}
                )
                .then(function (response) {
                    console.log(response);
                    if (response.meta.status == 200) {
                        console.log(11);
                        //跳转
                        that.$router.push({
                            name: 'home'
                        });
                    } else {
                        alert(response.meta.msg);
                    }
                })
                .catch(function (error) {
                    //处理错误情况
                    console.log(error);
                    alert("服务器出错..")
                })
        }

后端编码处理 

request.setCharacterEncoding("UTF-8");

创建工厂类DiskFileItemFactory对象,创建Request对象解析器,解析Request对象

private void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        //1.编码处理
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        //创建工厂类DiskFileItemFactory对象
        DiskFileItemFactory factory = new DiskFileItemFactory();
        //创建Request对象解析器
        ServletFileUpload fileUpload = new ServletFileUpload(factory);
        ResponseData r = null;
        //解析Request对象
        try {
            List<FileItem> fileItems = fileUpload.parseRequest(request);

            //遍历fileItems
            Map<String ,String > map = new HashMap<>();
            String saveFile = null;
            for (FileItem fileItem : fileItems){
                //判断是否是普通的表单项
                if (fileItem.isFormField()){
                    //表单项的name  getName()上传的文件名
                    String fieldName = fileItem.getFieldName();
                    //表单项的value
                    String value = fileItem.getString("utf-8");//tomcat编码为iso

                    map.put(fieldName,value);

                    /*或者使用if else
                    *   User user = new User();
                        if (fieldName.equals("name")){
                        user.setName(fileItem.getString("UTF-8"));
                    }
                    *
                    * */
                }else {
                    String savaPath = "D:\\PracticalTrainning3\\day\\javaWeb\\upload";
                    String uploadFilename = fileItem.getName();//上传的文件名
                    saveFile = FileUploadUtil.randomFileName()+FileUploadUtil.getFileSuffix(uploadFilename);
                    fileItem.write(new File(savaPath,saveFile));

                }
            }
            User user = new User();
            user.setName(map.get("name"));
            user.setGender(map.get("sex"));
            user.setAge(Integer.parseInt(map.get("age")));
            user.setAddress(map.get("address"));
            user.setEmail(map.get("email"));
            user.setQq(map.get("qq"));
            user.setPhoto(saveFile);

            //调用service完成保存
            IUserService iUserService = BeanFactory.createBean(IUserService.class);
            boolean add = iUserService.add(user);
            if (add){
                r = ResponseDataUtil.buildOk("添加成功！");

            }else {
                r = ResponseDataUtil.buildOk(ResultEnums.BAD_REQUEST);
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    
        ResponseJSONUtil.responseJSON(r,response);
    }

如果是get请求 带参数 以删除用户为例

url为：https://localhost:8888/api/vue/delete?id=1

 deleteById(id) {
            console.log(id);
            var that = this;
            that.$axios.get("vue/delete?id="+id)
                .then(function (resp) {
                    alert("删除成功！");

                    console.log(resp);
                    that.alluser();
                })
                .catch(function (error) {
                    //处理错误情况
                    console.log(error);
                    alert("服务器出错..")
                })
        },

 

用户管理系统问题

• 文件上传
• 图片显示
• 批量删除 全选、多选、反选
• 传递id给另一个组件 通过id发送请求给后端得到响应数据（用户信息）展示
• 分页 带条件分页 sql拼接 传递

麦当劳点餐结账页面

• 传数据 父组件的参数传给子组件 得到 渲染 
• 分页
• 复选框的是否选中 element-ui的事件和属性
• 动态数据响应 vuex