2021-09-11

亦凉 2022-09-11 03:13 14阅读 0赞

## 1 搭建项目 ##

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

vue  create my-blog

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

### 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>`插件中使用

## 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>
    
    
    <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>
    
    
    <style scoped>
    </style>

## 3 添加博客页的样式 ##

## 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>
    
    
    <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>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZ29vZDAwN2JveQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/db616f42e13b4758ba3c0e176a28e203.png