# Vue入门 ## 指令 ## 组件 ### 全局组件，后台jpa访问

最新推荐文章于 2023-11-13 10:37:55 发布

铝合金直男

最新推荐文章于 2023-11-13 10:37:55 发布

阅读量110

点赞数

分类专栏：前后台分离文章标签： Vue指令

本文链接：https://blog.csdn.net/yrj520bd/article/details/103116714

版权

前后台分离专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue入门

指令

组件

全局组件

全局的变量

Vue.component("ddm",{
	template:"<h1>欢迎来到叮当猫教育</h1>"
})

局部组件

var vm = new Vue({
    el:"#app",
    components: {
        "hello":{
            template:"<h1>欢迎来到叮当猫教育</h1>"
        }
    },
    data:{
        msg:"<h1>叮当猫教育欢迎你</h1>"
    },
    methods:{

    }
});

模板

<template id="t1">
    <!-- 有且只有一个根元素 -->
    <h1>欢迎来到叮当猫教育</h1>
    <div>123</div>
</template>
<script>
    // 全局的变量
    Vue.component("ddm",{
        template:"#t1"
    })
    var vm = new Vue({
        el:"#app",
        components: {
            "hello":{
                template:"<h1>欢迎来到叮当猫教育</h1>"
            }
        },
        data:{
            msg:"<h1>叮当猫教育欢迎你</h1>"
        },
        methods:{

        }
    });
</script>

vue的路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue的v-html/v-text指令</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!-- <div v-text="msg"></div> -->
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻页</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        //定义组件
        var home = {
            template:"<h1>我是主页</h1>"
        }
        var news = {
            template:"<h1>我是新闻页</h1>"
        }
        //配置路由
        var routes=[
            {path:"/home",component:home},
            {path:"/news",component:news}
            // 设置默认的页面
            {path:"/",redirect:"/home"}
        ]
        //实例化一个vue-router的对象
        var router = new VueRouter({
            routes,
            // 设置没有#
            mode:"history"
        })
        //把路由对象挂载到vue对象上面
        var vm = new Vue({
            el:"#app",
            router,
            // data:{
            //     msg:"<h1>叮当猫教育欢迎你</h1>"
            // },
            methods:{

            }
        });
    </script>
</body>
</html>

子路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue的v-html/v-text指令</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!-- <div v-text="msg"></div> -->
        <router-link to="/home">主页</router-link>
        <router-link to="/user">用户页面</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <template id="te_user">
        <div>
            <h3>用户信息</h3>
            <div>
                <router-link to="/user/login">登录</router-link>
                <router-link to="/user/reg">注册</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </template>
    <script>
        //定义组件
        var home = {
            template:"<h1>我是主页</h1>"
        }
        var user = {
            template:"#te_user"
        }
        var login = {
            template:"<h2>登录</h2>"
        }
        var reg = {
            template:"<h2>注册</h2>"
        }
        //配置路由
        var routes=[
            {path:"/home",component:home},
            {path:"/user",component:user,
                children:[
                    {path:"login",component:login},
                    {path:"reg",component:reg}
                ]
            },
            // 设置默认的页面
            {path:"/",redirect:"/home"}
        ]
        //实例化一个vue-router的对象
        var router = new VueRouter({
            routes,
            // 设置没有#
            // mode:"history"
        })
        //把路由对象挂载到vue对象上面
        var vm = new Vue({
            el:"#app",
            router,
            // data:{
            //     msg:"<h1>叮当猫教育欢迎你</h1>"
            // },
            methods:{

            }
        });
    </script>
</body>
</html>

vue-cli

…

Axios

中文帮助文档: http://www.axios-js.com/zh-cn/docs/

Vue实现前后端分离

前端代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue.js-访问API接口数据</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!-- 通过CDN引入Vue.js -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 通过CDN引入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style type="text/css">
			.container {
				display: flex;
				flex-direction: column;
                
			}

			.card {
				display: flex;
				margin-bottom: 10px;
			}

			.cover {
				width: 100px;
				height: 100px;
			}

			.cover img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年级</th>
					<th>操作</th>
				</tr>
				<template v-for="student in students">
					<tr>
						<td>{{student.id}}</td>
						<td>{{student.name}}</td>
						<td>{{student.sex}}</td>
						<td>{{student.gradeId}}</td>
						<td>
							<a href="#" @click="Delete(student.id)">删除</a>
							<a href="#" @click="Edit(student)">编辑</a>
						</td>
					</tr>
				</template>
				<!-- template是vue中的组件 -->
				<template>
					<tr>
						<td><input type="text" class="form-control" v-model="student.id" readonly="readonly" /></td>
						<td><input type="text" class="form-control" v-model="student.name" /></td>
						<td><input type="text" class="form-control" v-model="student.sex" /></td>
						<td><input type="text" class="form-control" v-model="student.gradeId" /></td>
						<td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
					</tr>
				</template>
			</table>
			<script type="text/javascript">
				var app = new Vue({
					/* 作用域 */
					el: '#app',
					/* 绑定给vue的数据 */
					data: {
						students: [],
						student: {
							id: '',
							name: '',
							sex: '',
							gradeId: ''
						}
					},
					created: function() {
						//在创建完vue对象之后要查询全部学生信息
						this.findAll();
					},
					methods: {
						findAll: function() {
							var _this = this;
							axios.get('http://localhost:8080/students')
								.then(function(response) {
									console.log(response);
									_this.students = response.data;
								})
								.catch(function(error) {
									console.log(error);
								});
						},
						Save: function() {
							var _this = this;
							/* 因为这个save的按钮进行两个操作,一个新增和修改 */
							if (this.student.id == null || this.student.id == '') {
								var student = JSON.stringify(_this.student);
								axios.post('http://localhost:8080/student', student, {
										headers: {
											"Content-Type": "application/json;charset=utf-8", //头部信息
										}
									})
									.then(function(response) {
										if (response.data != "" && response.data != null) {
											alert("增加成功");
											_this.findAll();
										} else {
											alert("添加失败");
										}
									})
									.catch(function(error) {
										console.log(error);
									});
							} else {
								var student = JSON.stringify(_this.student);
								axios.put('http://localhost:8080/student', student, {
										headers: {
											"Content-Type": "application/json;charset=utf-8", //头部信息
										}
									})
									.then(function(response) {
										if (response.data != "" && response.data != null) {
											alert("修改成功");
											_this.findAll();
										} else {
											alert("修改失败");
										}
									})
									.catch(function(error) {
										console.log(error);
									});
							}
						},
						Delete: function(sid) {
							var _this = this;
							axios.delete('http://localhost:8080/student/' + sid)
								.then(function(response) {
									if (response.data != "" && response.data != null) {
										alert("删除成功");
										_this.findAll();
									} else {
										alert("删除失败");
									}
								})
								.catch(function(error) {
									console.log(error);
								});
						},
						Edit: function(student) {
							this.student = student;
						}
					}
				})
			</script>
		</div>
	</body>
</html>

后台代码:

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.0.1</version>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

    <!--添加对swagger的依赖-->
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger2</artifactId>
        <version>2.7.0</version>
    </dependency>
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger-ui</artifactId>
        <version>2.7.0</version>
    </dependency>
</dependencies>

启动类

@SpringBootApplication
@EnableSwagger2
@MapperScan("com.changan.springboot_vue.mapper")
public class SpringbootVueApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootVueApplication.class, args);
    }
}

控制器

@RestController
@Api(value = "swagger ui 注释 api 级别")
@Slf4j
public class StudentController {

    @Autowired
    private StudentService studentService;

    @GetMapping("/students")
    @ApiOperation(value = "查询所有学生信息",notes = "查询所有学生信息")
    public List<Student> getAll(){
        return studentService.getAll();
    }

    /*@ResponseBody是json数据进行返回,@RequestBody是以json数据接收请求的参数*/
    @PostMapping("/student")
    public String save(@RequestBody Student student){
        System.out.println(student.toString());
        try {
            int result = studentService.save(student);
            if(result>0){
                return "添加成功";
            }else{
                return "添加失败";
            }
        }catch (Exception e){
            log.error(e.getMessage());
            return "添加失败";
        }
    }

    @DeleteMapping("/student/{id}")
    public String delete(@PathVariable("id") Integer id){
        try {
            int result = studentService.delete(id);
            if(result>0){
                return "删除成功";
            }else{
                return "删除失败";
            }
        }catch (Exception e){
            log.error(e.getMessage());
            return "删除失败";
        }
    }

    @PutMapping("/student")
    public String update(@RequestBody Student student){
        try {
            int result = studentService.update(student);
            if(result>0){
                return "修改成功";
            }else{
                return "修改失败";
            }
        }catch (Exception e){
            log.error(e.getMessage());
            return "修改失败";
        }
    }
}

WebConfig.java

@Configuration
public class WebConfig implements WebMvcConfigurer {
    //跨域配置
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否发送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(请求方式)
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        //放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        };
    }
}

SwaggerConfig.java

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.changan.springboot_vue.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("Spring Boot中使用Swagger2实现前后端分离开发")
                .description("此项目只是练习如何实现前后端分离开发的小Demo")
                .termsOfServiceUrl("https://blog.csdn.net/ca1993422")
                .contact("阳荣嘉")
                .version("1.0")
                .build();
    }
}