2021-09-11

最新推荐文章于 2024-10-04 00:46:18 发布

good007boy

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量90

点赞数

文章标签： vue.js javascript react.js

本文链接：https://blog.csdn.net/good007boy/article/details/120237681

版权

1 搭建项目

1.1 创建项目使用的是官方Vue CLI

vue  create my-blog

选项全部选no，除了选择vue3，其他选项全部是no:
在这里插入图片描述

1.2 该端口号

没有修改成功，视频是Vue2，我使用的是vue3

1.3 创建add-blog组件

在components组件里面复制HelloWorld.vue文件，改为AddBlog.vue。
修改<template>根部<div class="hello">改为<div class="add-blog">。删除多余的。
App.vue文件里导入AddBlog组件，import AddBlog from './components/AddBlog'。这里我们没有像// import HelloWorld from './components/HelloWorld.vue'一样，时候vue结尾，是因为使用ES6的模块化，一样会被识别。
加载组件

...
components: {
	//等价于AddBlog:AddBlog
    AddBlog 
  }
...

在<template>插件中使用

<template>
  <div id="app">
	  <add-blog></add-blog>
  </div>
</template>

2 设计添加博客

2.1 设计基本代码

<template>
  <div class="add-blog">
    <h2>添加博客</h2>
	<form>
		<label>博客标题</label> 
		<input type="text" v-model="blog.title" required />
		
		<label>博客内容</label>
		<textarea v-model="blog.content"></textarea>
		
		<div id="checkboxes">
			<label>Vue.js</label>
			<input type="checkbox" value="Vue.js" v-model="blog.categories">
			<label>Node.js</label>
			<input type="checkbox" value="Node.js" v-model="blog.categories">
			<label>React.js</label>
			<input type="checkbox" value="React.js" v-model="blog.categories">
			<label>Angular4</label>
			<input type="checkbox" value="Angular4" v-model="blog.categories">
		</div>
		<label>作者：</label>
		<select v-model="blog.author">
			<option v-for="author in authors">
				{{author}}
			</option>
		</select>
		<button v-on:click.prevent="post">添加博客</button>
	</form>
	
	<hr />
	<div id="preview">
		<h3>博客总览</h3>
		<p>博客标题：{{blog.title}}</p>
		<p>博客内容：</p>
		<p>{{blog.content}}</p>
		<p>博客分类：</p>
		<ul>
			<li v-for="category in blog.categories">
				{{category}}
			</li>		
		</ul>
		<p>作者：{{blog.author}}</p>
	</div>
  </div>
</template>

<script>
export default {
  name: 'add-blog',
  data() {
  	return {
		blog:{
			title:"",
			content:"",
			categories:[]
		},
		authors:["a","b","C"],
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.1 添加axios

npm install --save axios vue-axios   //cnpm install --save axios vue-axios

// import axios from './plugins/axios.js'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);

app.use(VueAxios,axios);
app.mount('#app');

2.2 添加post请求方法

<template>
template>
  <div class="add-blog">
    <h2>添加博客</h2>
	<form v-if="!submmited">
		<label>博客标题</label>
		<input type="text" v-model="blog.title" required />
		
		<label>博客内容</label>
		<textarea v-model="blog.content"></textarea>
		
		<div id="checkboxes">
			<label>Vue.js</label>
			<input type="checkbox" value="Vue.js" v-model="blog.categories">
			<label>Node.js</label>
			<input type="checkbox" value="Node.js" v-model="blog.categories">
			<label>React.js</label>
			<input type="checkbox" value="React.js" v-model="blog.categories">
			<label>Angular4</label>
			<input type="checkbox" value="Angular4" v-model="blog.categories">
		</div>
		<label>作者：</label>
		<select v-model="blog.author">
			<option v-for="author in authors">
				{{author}}
			</option>
		</select>
		<button v-on:click.prevent="post">添加博客</button>
	</form>
	
	<div v-if="submmited">
		<h3>您的博客发布成功！</h3>
	</div>
	
	<hr />
	<div id="preview">
		<h3>博客总览</h3>
		<p>博客标题：{{blog.title}}</p>
		<p>博客内容：</p>
		<p>{{blog.content}}</p>
		<p>博客分类：</p>
		<ul>
			<li v-for="category in blog.categories">
				{{category}}
			</li>		
		</ul>
		<p>作者：{{blog.author}}</p>
	</div>
  </div>
</template>

<script>
export default {
  name: 'add-blog',
  data() {
  	return {
		blog:{
			title:"",
			content:"",
			categories:[]
		},
		authors:["a","b","C"],
		submmited:false
	}
  },
  methods:{
	  post:function(){
		  // http://jsonplaceholder.typicode.com/posts/
		 //错误使用
		  // axios.get('http://jsonplaceholder.typicode.com/posts')
				// .then(response=>this.blog=response.data);
				//正确使用
				this.axios.post('http://jsonplaceholder.typicode.com/posts',{
					title:this.blog.title,
					body:this.blog.content,
					userId:1
				}).then(response=>{
					console.log(response);
					this.submmited = true;
				}).catch(error=>{
					console.log(error);
				});
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

3 添加博客页的样式

<style scoped>
	#add-blog *{
		box-sizing: border-box;
	}
	#add-blog{
		margin: 20px auto;
		max-width: 600px;
		padding: 20px;
	}
	label{
		display: block;
		margin: 20px 0 10px;
	}
	
	input[type="text"],textarea,select{
		display: block;
		width:100%;
		padding: 8px;
	}
	#checkboxes label{
		display: inline-block;
		margin-top: 0;
	}
	
	#checkboxes input{
		display: inline-block;
		margin-right: 10px;
	}
	
	button{
		display: block;
		margin: 20px 0;
		background: crimson;
		color: #fff;
		border: 0;
		padding: 14px;
		border-radius: 4px;
		font-size: 18px;
		cursor: pointer;
	}
	
	#preview{
		padding: 10px 20px;
		border: 1px dotted #ccc;
		margin: 30px 0;
	}
	
	h3{
		margin-top: 10px;
	}
</style>

4 设计展示页面

<template>
  <div id="show-blogs">
    <h2>博客总览</h2>
	<div v-for="blog in blogs" class="single-blog">
		<h2>{{blog.title}}</h2>
		<article>
			{{blog.body}}
		</article>
	</div>
  </div>
</template>

<script>
export default {
  name: 'ShowBlogs',
  data() {
  	return{
		blogs:[]
	}
  },
  created() {
  	this.axios.get("https://jsonplaceholder.typicode.com/posts")          //get()方法接收一个URL作为参数，如果要传递参数
    .then(response=>{             //以?key=value的形式附加在URL上
				// console.log(response);
       this.blogs = response.data.slice(0.10);
	   console.log(this.blogs);
    })
    .catch(error=>{               //如果出现错误，则调用catch()方法中的回调，可以在该回
        console.log(error);       //调函数中对错误进行处理，并向用户提示错误
    })

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#show-blogs{
	max-width: 800px;
	margin: 0 auto;
}
.single-blog{
	padding: 20px;
	margin: 20px 0;
	box-sizing: border-box; 
	background:#eee;
}
</style>

4.1 重点

this.axios.get(...)

5 Vue自定义指令（钩子函数）

6 8 路由参数

showblogs.vue

<template>
....
<div v-for="blog in filteredBlogs" class="single-blog">
		<router-link v-bind:to="'/single-blog/'+blog.id">
			<h2 v-rainbow>{{blog.title}}</h2>
		</router-link>
		<article v-touppercase>
			{{blog.body}}
		</article>
	</div>
	</template>

<style scoped>
#show-blogs{
	max-width: 800px;
	margin: 0 auto;
}
.single-blog{
	padding: 20px;
	margin: 20px 0;
	box-sizing: border-box; 
	background:#eee;
	border:1px dotted #aaa;
}
#show-blogs a{
	color: #444;
	text-decoration: none;
}
input[type="text"]{
	padding: 8px;
	width: 100%;
	box-sizing: border-box;
}
</style>