安装node @vue/cli

image.png

新建前端项目

vue create frontend

image.png


image.png

image.png



了解 Bootstrap

最基本的模板
请确保你的页面遵循了最新的设计和开发标准。也就是说，使用 HTML5 doctype 并包含 viewport meta 标签以实现正确的响应式行为。把这些东西攒在一起，你的页面应该是这样的：

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- Required meta tags -->
  5.     <metacharset="utf-8">
  6.     <metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- Bootstrap CSS -->
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"crossorigin="anonymous">
  9. <title>Hello, world!</title>
  10.   </head>
  11.   <body>
  12.     <h1>Hello, world!</h1>
  13. <!-- Optional JavaScript -->
  14.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  15.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script>
  16.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script>
  17.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"crossorigin="anonymous"></script>
  18.   </body>
  19. </html>

来自 [https://v4.bootcss.com/docs/getting-started/introduction/](https://v4.bootcss.com/docs/getting-started/introduction/)

了解 Font Awesome


image.png

新建 index.html


image.png

修改App.vue

image.png

搭建 Container 组件

Container.vue 基础框架

  1. <template>
  2.   <div class="row">
  3.     <!-- 左右两屏 -->
  4.     <div class="col-md-4">
  5.       <!-- 左边是编辑部分 -->
  6.       <div class="form-group">
  7.         <input type="hidden" v-model="url">
  8.       </div>
  9.       <div class="form-group">
  10.         <input type="text" v-model="title" class="form-control" placeholder="标题">
  11.       </div>
  12.       <div class="form-group">
  13.         <textarea v-model="content" class="form-control" placeholder="内容"></textarea>
  14.       </div>
  15.       <div class="form-group">
  16.         <button class="btn btn-block btn-success" @click="saveBlog()">保存</button>
  17.       </div>
  18.     </div>
  19.     <div class="col-md-8">
  20.       <!-- 右边是博客内容表格部分 -->
  21.       <table class="table table-bordered table-hover">
  22.         <thead>
  23.           <th class="text-center">标题</th>
  24.           <th class="text-center">内容</th>
  25.           <th class="text-center">编辑</th>
  26.           <th class="text-center">删除</th>
  27.         </thead>
  28.         <tbody>
  29.           <tr v-for="blog in blogs" :key="blog.url">
  30.             <td>{{blog.title}}</td>
  31.             <td>{{blog.content}}</td>
  32.             <td>
  33.               <button class="btn btn-success" @click="editBlog(blog)">
  34.                 <i class="fa fa-edit"></i>
  35.               </button>
  36.             </td>
  37.             <td>
  38.               <button class="btn btn-success" @click="deleteBlog(blog)">
  39.                 <i class="fa fa-trash"></i>
  40.               </button>
  41.             </td>
  42.           </tr>
  43.         </tbody>
  44.       </table>
  45.     </div>
  46.   </div>
  47. </template>
  48. <script>
  49. export default {
  50.   name: 'Container',
  51.   props: {
  52.   },
  53.   data() {
  54.     return {
  55.       blogs: null,
  56.       url: '',
  57.       title: '',
  58.       content: ''
  59.     }
  60.   },
  61.   methods: {
  62.     getAll() {
  63.     },
  64.     saveBlog() {
  65.     },
  66.     editBlog() {
  67.     },
  68.     deleteBlog() {
  69.     }
  70.   },
  71.   mounted() {
  72.   }
  73. }
  74. </script>
  75. <!-- Add "scoped" attribute to limit CSS to this component only -->
  76. <style scoped>
  77. </style>

添加 axios http 请求组件


npm install axios —save

image.png

导入 axios

image.png

获取文章、修改文章、保存文章

image.png


image.png


image.png

最终效果


image.png



image.png