Java基本数据类型 Anaconda 华为鸿蒙 bam https docker容器 sockets plot upload jwt vue响应式布局 nginx视频教程 oracle删除字段sql cmd查看mysql版本 java清空数组 js原生点击事件 eclipse显示左边目录 oracle重命名表名 wordpress本地建站 div字体加粗 php获取当天的0点时间戳 python的def java重载和重写 java中的基本数据类型 java地址 java输出当前时间 java中long java定义 高等数学同济第七版 魔兽改图工具 朋友圈访客记录教程 苹果双微信 wegame更新失败 vscode全局搜索 pr时间轴 dll文件 lol无限视野 excel后缀 图片文字提取软件 汉仪旗黑字体下载
当前位置: 首页 > 学习教程  > 编程语言

elementUI+Vue+json-server做简单的文章后台管理

2021/1/13 19:18:56 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

elementUIVuejson-server做简单的文章后台管理 最近刚接触elementUI不久,为了加深学习理解,便利用elementUI做了个简单练习,在CSDN上写记录一下学习过程,顺便整理回顾一下整个过程。 创建项目 vue create article-manager首先明…

elementUI+Vue+json-server做简单的文章后台管理

最近刚接触elementUI不久,为了加深学习理解,便利用elementUI做了个简单练习,在CSDN上写记录一下学习过程,顺便整理回顾一下整个过程。

创建项目

vue create article-manager

首先明确小目标,小项目主要为了实现文章管理,包括新建文章,文章获取,修改文章,删除文章几个功能,利用elementUI做页面布局以及表单提交,利用json-server来模拟后台数据库管理,用axios做网络请求,整理代码逻辑思路,开始进行具体操作。

1、配置路由

在配置路由之前,先在views创建3个vue文件分别为AriticlesCreate.vue(新建文章),ArticlesList.vue(文章列表),editArticle.vue(修改文章),在router文件的index.js中配置路由。

import Vue from "vue";
import VueRouter from "vue-router";
import AriticlesCreate from "../views/AriticlesCreate.vue";
import ArticlesList from "../views/ArticlesList.vue";
import editArticle from "../views/editArticle.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/articles/index"
  },
  {
    path: "/articles/index",
    component: ArticlesList
  },
  {
    path: "/articles/create",
    component: AriticlesCreate
  },
  {
    path: "/articles/edit/:id",
    component: editArticle
  }
];

const router = new VueRouter({
  routes,
  mode: 'history'
});

export default router;

2、elementUI页面布局

首先,要想使用elementUI,需要使用以下命令

//安装
vue add element
//npm i element-ui -S

//导入
import './plugins/element.js'

接下来,就是处理页面布局问题,在App.vue中使用elementUI组件

<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu router :default-openeds="['1']">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-document"></i>内容管理
        </template>
        <!-- index:路由 -->
        <el-menu-item index="/articles/index">文章列表</el-menu-item>
        <el-menu-item index="/articles/create">新建文章</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item >查看</el-dropdown-item>
          <el-dropdown-item >新增</el-dropdown-item>
          <el-dropdown-item >删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>黑翼之光</span>
    </el-header>
	//此时加上router-view可以正常跳转路由
    <template>
      <router-view></router-view>
    </template>
  </el-container>
</el-container>
</template>

<script>
  export default {
    name:'App',
  }
</script>

<style>
  
</style>

在这里插入图片描述
如图所示,红色框区域为页面跳转区域,更符合人们的体验。

3、json-server后台数据

创建一个db.json文件(满足json格式)

{
  "list": [
    {
      "title": "背影",
      "body": "月光下的你",
      "id": 1
    },
    {
      "title": "背影",
      "body": "匆匆",
      "id": 3
    }
  ]
}

采用命令建立后台数据

//npm --install -g json-server
json-server --watch db.json
//默认端口号为3000
//json-server db.json --port 3001
//json-server --watch --port 3001 db.json

4、前端页面

ArticlesList.vue

<template>
  <el-container>
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="title"  label="标题" width="120">
        </el-table-column>
        <el-table-column prop="body" label="内容" width="400">
        </el-table-column>
        <el-table-column  label="操作" width="150">
          <template slot-scope="scope">
            <!-- scope.row:当前这一行对象 -->
            <el-button @click="handleClick(scope.row)" type="text" >查看</el-button>
            <el-button @click="edit(scope.row.id)" type="text" >编辑</el-button>
            <el-button type="text" @click="delArticle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    
  </el-container>
</template>

<script>
    export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
      delArticle(id){
        // 删除操作之后重新获取数据
        this.$http.delete(`/list/${id}`)
        this.$http.get('/list').then(res =>{
          this.tableData = res.data
        })
      },
      edit(id){
        this.$router.replace(`/articles/edit/${id}`)
      }
    },
    created(){
      //获取数据
      this.$http.get('/list').then(res =>{
        this.tableData = res.data
      })
      console.log(this.tableData);
    }
  }
</script>

<style scoped>
    .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

AriticlesCreate.vue
可以利用elementUI中的表单控件做一定修改,然后绑定事件。

<template>
  <el-form label-width="120px">
    <el-form-item label="文章标题">
          <el-input v-model="article.title"></el-input>
      </el-form-item>
    <el-form-item label="文章内容">
          <el-input type="textarea" v-model="article.body"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveArticle">立即创建</el-button>
      <el-button type="primary" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>

</template>
<script>
  export default {
    data() {
      return {
        article: {
          title:'',
          body:''
        }
      };
    },
    methods:{
      saveArticle(){
        this.$http.post('/list',this.article).then(res =>{
          console.log(res.data);
          this.$router.replace('/articles/index')
        })
      },
      cancel(){
        // this.$router.replace('/articles/index')
        this.$router.back()
      }
    }
  }
</script>

<style scoped>

</style>>

editArticle.vue
进入修改该文章时,需要在文本框中获得原来的文章内容,由于每一个数据有一个独立的id,因此可以用id获取该数据。

<template>
    <el-form label-width="120px">
    <el-form-item label="文章标题">
            <el-input v-model="article.title"></el-input>
        </el-form-item>
    <el-form-item label="文章内容">
            <el-input type="textarea" v-model="article.body"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="saveArticle">修改</el-button>
        <el-button type="primary" @click="cancel">取消</el-button>
    </el-form-item>
    </el-form>
</template>
<script>
  export default {
    data() {
      return {
        article: {
          title:'',
          body:''
        }
      };
    },
    methods:{
      saveArticle(){
        this.$http.post('/list',this.article).then(res =>{
          console.log(res.data);
          this.$router.replace('/articles/index')
        })
      },
      cancel(){
        this.$router.replace('/articles/index')
        //this.$router.back()
      }
    },
    created(){
    	//this.$route.params.id:当前该行对象的id值
        this.$http.get(`/list/${this.$route.params.id}`).then(res =>{
            this.article.title = res.data.title
            this.article.body = res.data.body
        })
    }
  }
</script>

<style scoped>

</style>

本文链接: http://www.dtmao.cc/news_show_600017.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?