Visual Studio Code 运用vue2简单信息系统管理页面，内容实现页面基本布局、axios异步加载、vue路由

最新推荐文章于 2023-10-13 11:33:53 发布
最新推荐文章于 2023-10-13 11:33:53 发布
阅读量519 收藏 3
点赞数 1
文章标签： vue.js vscode javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62249633/article/details/130181791
版权

1.main.js 导入所需要库

import Vue from 'vue'
import App from './App.vue'
import router from './router'

//引入Element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


Vue.config.productionTip = false


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2.在views文件夹下创建tlias文件夹，再在tlias文件夹里创建文件EmView.vue

<template>
  <div>
    <!-- 页面结构 -->
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px">tlias智能学习辅助系统</el-header>
      <el-container>
        <el-aside width="230px" style="border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>信息系统管理</template
              >
              <el-menu-item index="1-1">
                <router-link to="/dept">部门管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/em">员工管理</router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 添加一个FORM表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职日期">
              <el-date-picker
                v-model="searchForm.ertydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- table表格 -->
          <el-table :data="tableData" border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column label="图像" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.image" width="100px" height="70px" />
              </template>
            </el-table-column>
            <el-table-column label="性别" width="140">
              <template slot-scope="scope">
                {{ scope.row.gender == 1 ? "男" : "女" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="updatetime"
              label="最后操作时间"
              width="230"
            ></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <span class="demonstration">直接前往</span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        ertydate: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      alert("查询数据");
    },
    handleSizeChange: function (url) {
      alert("查询" + url + "页数");
    },
    handleCurrentChange: function (url) {
      alert("查询" + url + "页");
    },
  },
  mounted() {
    //发送异步请求
    axios
      .get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
      .then((result) => {
        this.tableData = result.data.data;
      });
  },
};
</script>

<style>
</style>

    3.在views文件夹里创建 element文件夹，再在element文件夹里创建 DeptView.vue   

<template>
  <div>
    <!-- 设置页面框架及内容 -->
    <!-- 1.设置标题 -->
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >tlias智能学习辅助系统</el-header
      >
      <!-- 2.设置侧边栏 -->
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/dept">部门管理</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/em">员工管理</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 3.创建表单 -->
          <el-table :data="tableData">
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>

            <el-table-column
              prop="updatetime"
              label="最后操作时间"
              width="230"
            ></el-table-column>

            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    //发送异步请求(数据来源)
    axios
      .get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
      .then((result) => {
        this.tableData = result.data.data;
      });
  },
};
</script>

<style>
</style>

    4.在index.js文件里添加路由


import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)
//返回指定路由
const routes = [
  {
    path: '/em',
    name: 'emp',
    component:() => import(/* webpackChunkName: "about" */ '../views/tlias/EmView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    
    component: () => import(/* webpackChunkName: "about" */ '../views/element/DeptView.vue')
  },
  {
    //重载页面
    path: '/',
    redirect: '/em'
  }
]

const router = new VueRouter({
  routes
})

export default router

最后，展示一下结果，员工系统

 部门系统

 

@抱米花＆
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue2编写主体页面
5年编程经验的老猿。
04-28 509
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
基于Spring+mybatis+Vue的SpringBoot线上网络文件管理系统
Java
04-30 193
最好是jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以最好是Tomcat 7.x,8.x,9.x版本均可，理论上Tomcat版本不是太老都可以。，我们在这个环境上运行的，参考置顶文章安装环境。Windows XP/7/8//8.1/10/11或者Linux或者MacOS,2G内存以上，推荐4G，4G以上更好。
Visual Studio C++ 中小微企业信息管理系统设计与实现之开发财务管理系统
Haypu的博客
03-29 1691
题目要求设计与实现包括人事管理、财务管理、原材料采购与库存管理、产品销售管理等功能的中小微企业信息管理系统，支持各类人员相关信息的增、删、改、查。 管理员具有用户建立、权限分配、基础信息维护等功能权限。人事部门用户具有人事信息维护功能权限。财务部门人员具有工资核算、成本核算、利润分析等功能权限。仓库管理人员具有入库登记、出库登记、库存清算等功能权限。销售人员具有销售登记、销售统计等功能权限。各级领...
基于Visual Studio+SQL Server的项目实施管理系统设计与实现
毕业作品网站
05-26 824
基于Restful API的项目实施管理系统的实现原理非常清晰，其主要目的是实现项目实施的进度管理，其次附带一些辅助性的功能，其目的是提高用户的用户体验以及应用程序的多元化、丰富应用程序的内涵、充实应用程序的内容。单位信息模块：本模块大部分功能是基于Restful API实现的，但少部分内容是直接通过封装的类库文件直接实现的。项目信息模块：本模块是项目实施管理系统的最为重要核心模块，所有的执行方案全部通过调用Restful API接口的方式实现。3.5数据库系统参数配置 14。
vue文件管理系统仿百度网盘
11-13
Doc文件管理系统仿百度网盘源代码使用vue+elementUI实现文件下钻功能，类似百度网盘功能，hover显示下载
JavaWeb-14-Element案例
yelitoudu的博客
08-21 162
前端路由：URL中的hash(#号) 与组件之间的对应关系。介绍： Vue Router 是 Vue 的官方路由。组成：VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件：请求链接组件，浏览器会解析成：动态视图组件，用来渲染展示与路由路径对应的组件安装（创建vue项目时已经选择了vue路由定义路由：① 请求链接组件：​② 定义路由表：​Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。
Vs Code Vue实现增删改查
01-07
本教程将重点讲解如何使用Visual Studio Code（简称Vs Code）这个强大的代码编辑器来实现Vue项目中的增删改查功能。首先，我们来看看Vue的基本概念。 Vue.js是尤雨溪开发的一个渐进式JavaScript框架，它具有轻量级...
SpringBoot+Vue的学生管理系统源码.zip
03-06
这是一个基于SpringBoot和Vue.js构建的学生管理系统的源码包，非常适合初学者和有一定经验的开发人员学习和使用。下面将详细解析这个系统的核心技术和实现原理。 **SpringBoot** SpringBoot是Spring框架的一个衍生...
基于SpringBoot+Vue的软件缺陷管理系统.zip
08-31
【标题】：“基于SpringBoot+Vue的软件缺陷管理系统”是一个集成SpringBoot后端框架与Vue.js前端框架的项目，旨在实现高效、便捷的软件缺陷管理。这个系统利用现代Web技术，为开发团队提供了一个集中化的平台，用于...
基于Java的家教信息网站，java+springboot+vue开发的家教预约平台系统 - 毕业设计 - 课程设计.zip
最新发布
03-30
1. **路由管理**：Vue Router用于页面路由，实现不同页面间的导航。 2. **状态管理**：Vuex帮助管理组件之间共享的状态，使得数据流动更有序。 3. **组件设计**：如登录组件、家教列表组件、预约表单组件等，每个...
毕业设计项目 交互式主题建模分析系统 后端部分.zip
12-31
Vue Router用于实现页面路由，确保用户在系统中的导航顺畅。Axios库可能被用于发起HTTP请求，与后端API进行数据交换。 4. 交互式主题建模：该系统的核心功能是交互式主题建模，这涉及用户可以动态调整参数并实时...
VSCode在一个网页引入多个文件.vue文件
weixin_45925109的博客
08-10 429
因为工作需要,我得在一个网页里使用多个按钮,点击不同的按钮会显示出不同的表单进行登记,如果把所以按钮表单写在一个.vue里面,那么我觉得我部门经理会锤死我!所以我自学了三个多小时,没弄明白,最后问经理,一语点醒梦中人!!! 中间的ryjc是我自定义的.vue文件 在js里面配置引入! ...
java + vue 实现文件管理系统（超简洁）
weixin_45826772的博客
11-30 5305
开源一个超简易的文件管理系统，只是为了满足自己一些小文件的统一在线管理
vue打造的轻量中后台管理系统
豆芽菜
08-30 1608
vue打造的轻量中后台管理系统 项目地址 预览图 登录页 主面板 基本表格 基本表单 表单详情 markdown编辑器 文件上传 charts图标 各位同行如果觉得这个项目还阔以的话，可以给我点个”☆“，三克油。 本项目会一直更新下去,一直开源，一直追求工匠精神 原来一直是使用的是别人的Vue管理系统，可是又觉得与其用别人的东西，自己还不如花点时间和精力去开发一套自己的管理系统，并且切合着实际的项目经验去使用各个组件，这才有了vue-system-admin的诞生，小而精，才是我的初衷
基于SpringBoot+vue的文件管理系统
乐嘉工作室
12-13 6566
基于SpringBoot+vue的文件管理系统
表单案例——文件管理器(vue)
Jing_tom的博客
07-17 855
表单案例——文件管理器(vue) 1. body部分 <div id="app"> <div class="head"> <button v-on:click="change('box1')">列表视图</button> <button @click="change('box2')">网格视图</button> <input v-model=
vue2页面结构
weixin_43845550的博客
10-13 120
【代码】vue2页面结构。
VS Code上搭建Vue开发环境超详细教程
热门推荐
weixin_49136054的博客
03-17 1万+
这篇关于在Visual Studio Code上搭建vue开发环境的超详细教程手把手教会你!首先在Visual Studio Code上搭建vue开发环境有几个步骤：1、下载安装node.js2、3、4、安装vue/cli脚手架5、创建vue项目6、运行vue项目。
VSCode自定义代码片段11——vue路由的配置
Java_53的博客
04-19 1633
vue的路由配置 // 1,配置路由/映射表 import VueRouter from "vue-router" import Vue from "vue" // 5,传入所有路由对应.vue组件 // 【【【 主页页面 import Home from "../components/Home.vue" import homeNews_1 from "../components/homeNews_1.vue" import homeNews_2 from "../components/homeNe
帮我写基于visual Studio code 的vue高级图书管理系统
07-15
当然可以！下面是一个简单的基于Visual Studio Code的Vue高级图书管理系统的示例代码： 首先，您需要安装Node.js和Vue CLI。然后，按照以下步骤进行操作： 1. 创建一个新的Vue项目： ``` vue create book-management-system ``` 2. 进入项目目录： ``` cd book-management-system ``` 3. 安装一些必要的依赖项： ``` npm install axios vue-router vuex ``` 4. 在项目根目录下创建一个新的文件夹`src/components`，用于存放组件文件。 5. 创建以下组件文件： - `src/components/Home.vue`：用于显示主页内容。 - `src/components/Books.vue`：用于显示图书列表。 - `src/components/BookDetails.vue`：用于显示图书详情。 6. 在`src/components`目录下创建一个名为`router.js`的文件，设置路由配置： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from './Home.vue' import Books from './Books.vue' import BookDetails from './BookDetails.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/books', component: Books }, { path: '/books/:id', component: BookDetails } ] const router = new VueRouter({ routes }) export default router ``` 7. 在`src/components`目录下创建一个名为`store.js`的文件，设置Vuex状态管理： ```javascript import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) const store = new Vuex.Store({ state: { books: [] }, mutations: { SET_BOOKS(state, books) { state.books = books } }, actions: { async fetchBooks({ commit }) { try { const response = await axios.get('https://api.example.com/books') // 替换为您的API地址 commit('SET_BOOKS', response.data) } catch (error) { console.error(error) } } } }) export default store ``` 8. 在`src/main.js`文件中添加以下代码： ```javascript import Vue from 'vue' import App from './App.vue' import router from './components/router' import store from './components/store' new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` 9. 在`src/App.vue`文件中添加以下代码： ```vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ``` 10. 在`src/components/Home.vue`文件中添加以下代码： ```vue <template> <div> <h1>Welcome to the Book Management System</h1> </div> </template> <script> export default { name: 'Home' } </script> ``` 11. 在`src/components/Books.vue`文件中添加以下代码： ```vue <template> <div> <h2>Book List</h2> <ul> <li v-for="book in books" :key="book.id"> <router-link :to="'/books/' + book.id">{{ book.title }}</router-link> </li> </ul> </div> </template> <script> import { mapState, mapActions } from 'vuex' export default { name: 'Books', computed: { ...mapState(['books']) }, methods: { ...mapActions(['fetchBooks']) }, mounted() { this.fetchBooks() } } </script> ``` 12. 在`src/components/BookDetails.vue`文件中添加以下代码： ```vue <template> <div> <h2>Book Details</h2> <div v-if="book"> <h3>{{ book.title }}</h3> <p>Author: {{ book.author }}</p> <p>ISBN: {{ book.isbn }}</p> </div> <div v-else> <p>Loading...</p> </div> </div> </template> <script> import { mapState } from 'vuex' export default { name: 'BookDetails', computed: { ...mapState(['books']), book() { const bookId = this.$route.params.id return this.books.find(book => book.id === bookId) } } } </script> ``` 现在，您可以在Visual Studio Code中打开该项目，并使用Vue CLI提供的开发服务器运行它： ``` npm run serve ``` 这只是一个简单的示例，您可能需要根据您的实际需求进行进一步的开发和调整。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值