Vue的使用(2)

一个简单的Vue项目的创建

• 创建一个UserList.vue组件

• 在App.vue中使用该组件

1. 使用组件的第一步，导入组件
2. 使用组件的第二部，申明这个组件
3. 使用组件的第三步：引用组件

结果：

事件和插值语法

结果：

ref属性

这是一个一级标题

methods:{
	btnClick1(){
		var h1Element=this.$refs.h1
		console.log("找到的组件是"+h1Element.innerText)
	}
}

props

接收参数

• App.vue

• UserList.vue

scoped

添加到style中，只有当前组件生效

结果：

localstorage和sessionstorage

全局事件总线

• 在main.js中安装全局事件总线

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    //生命周期的第一个钩子函数
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线
    },


}).$mount('#app')

• 在userList.vue中进行监听传过来的消息

• 在userSchool.vue中发送数据

结果：

代理服务器的配置和Axios的请求发送

什么是跨域

如何解决跨域问题

• 在服务器端写一个过滤器，将响应头设置为可信赖
• 在Vue端设置代理服务器
• 给整个tomcat设置允许跨域 实际的操作也是设置相应资源可信赖

代理服务器的配置(vue.config.js)

• 在vue.config.js中配置

module.exports = {
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
        proxy: {
            '/api':{ 
                target:'http://127.0.0.1:9090',
                changeOrigin:true,
                pathRewrite:{
                    '/api':''
                }
            }
        }
    }
}

Axios的请求发送

• 请求发送第一步：导包

• 客户端发送请求（不带参数的GET请求）

• 服务器端响应

package com.wz.practice.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private Integer id;
    private String username;
    private String password;
}

package com.wz.practice.servlet;

import com.alibaba.fastjson.JSON;
import com.wz.practice.pojo.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/users")
public class UserServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("获取到的数据是：username:"+username+"password"+password);

        //向客户端返回json格式的数据
        User user = new User(1, "用户名数据", "密码数据");
        String data = JSON.toJSONString(user);
        //向客户端返回数据
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.write(data);
        writer.flush();
        writer.close();

    }
}

结果：

---

• 带参数的GET请求

ProxyAxios.vue

结果：

---

• POST请求不带参数

---

• POST请求带参数
  

插槽slot

基本使用

• 在userList.vue中定义一个slot

• 在App.vue中使用

结果：

具名插槽

结果：

路由

路由是控制页面跳转的

• 导包

• 编写main.js

• HomePage.vue

• AboutPage.vue

• MessagePage.vue

• App.vue

结果：

多级路由

需求：在Message页面中增加两个按钮，点击之后，在Message页面中显示内容

• DetailPage.vue

• NewsPage.vue

• 在index.js中配置路由

//把路由导进来
import VueRouter from "vue-router";
//将要配置的路由的组件引进来(点击之后要跳转的都要配)
import AboutPage from "../components/AboutPage"
import MessagePage from "../components/MessagePage"
import DetailPage from "../components/DetailPage"
import NewsPage from "../components/NewsPage"

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:AboutPage
        },
        {
            path:'/message',
            component:MessagePage,
            //在那里显示就在哪里配置
            children:[
                {
                    path:"detail",
                    name:"detail",
                    component:DetailPage
                },
                {
                    path:"news",
                    name:"news",
                    component:NewsPage
                }
            ]


        }
    ]
})

• 在Message页面中实现跳转的功能

结果：

编程式路由

前进、后退、跳转到指定页面

• HomePage.vue

• 跳转页面发送的数据是可以取出来的

• NewsPage.vue

结果：