【日常学习】使用Vue-Cli搭建Vue项目

最新推荐文章于 2023-08-11 18:37:37 发布

九离⠂

最新推荐文章于 2023-08-11 18:37:37 发布

阅读量424

点赞数

分类专栏： # vue 文章标签：后端日常学习

本文链接：https://blog.csdn.net/qq_43410878/article/details/123845006

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、使用Vue-Cli搭建Vue项目

1.1 vue-cli 介绍

cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。

1.2 node.js 介绍及安装

node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。

从官网下载安装即可：http://nodejs.cn/download/

1.3 axios.js 介绍

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF(跨站请求伪造)

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架

1.4 Element-Ul 介绍

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI

1.5 moment.js 介绍

moment.js是一个JavaScript的日期和时间处理工具类，提供了非常全面且强悍的日期处理功能

1.6 项目搭建流程

1.在 Terminal 下使用npm构建项目

1.首先安装Node.js

2.npm install -g @vue/cli        #安装vue-cli,该步骤需要等一段时间

3.vue -V                              #查看vue-cli的版本

4.vue create my-app                   #创建名为my-app的项目

5.my-app>npm install axios vue-axios element-ui --save #安装axios，vue-axios和 element-ui

6.my-app>npm install moment --save #安装格式化时间日期的moment.js

7.my-app>npm run serve  #启动项目

2.访问http://localhost:8080/ 会显示 HelloWorld.vue 该组件的页面

在这里插入图片描述

1.7 在 main.js 中添加如下配置

main.js 是该程序的入口

// 如下两个是网络的请求组件
import VueAxios from "vue-axios";
import axios from 'axios'

// ElmentUI的组件
import ElementUI from 'element-ui'
// ElementUI的样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VueAxios, axios)
Vue.use(ElementUI)

// 设置基础的url地址
axios.defaults.baseURL = 'http://localhost:8081'

1.8 修改 App.vue

注意：el-table-column 标签中的 prop属性对应的是实体类的属性名

<template>
  <el-container>
    <el-header>管理系统</el-header>
    <el-container>
      <el-aside>系统列表</el-aside>
      <el-main>
        <el-table
                :data="musics"
                border
                style="width: 100%">
          <el-table-column
                  align="center"
                  prop="musicId"
                  label="编号">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="musicName"
                  label="歌曲名称"
                  width="180">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="musicAlbumName"
                  label="专辑名称"
                  width="180">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="musicArtistName"
                  label="歌手名称"
                  width="180">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>

export default {
  name: 'App',
  components: {
    //HelloWorld
  },

  data(){
    return{
      musics:[]
    }
  },

  mounted() {

    // 第一种方式
    // let that = this;
    // this.axios.get('/music/findAll')
    //         .then(function (response) {
    //           that.musics = response.data;
    //         })
    //         .catch(function (error) {
    //           console.log(error);
    //         });

    // 第二种方式
    // this.axios.get('/music/findAll')
    //         .then(resp => {
    //           // resp.data才是实际的数据本身
    //           this.musics = resp.data;
    //           alert(this.musics)
    //         })

    // 第三种方式
    this.$http.get('/music/findAll').then((response) => {
      this.musics = response.data;
    })
  },
}
</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>

<!-- 设置容器样式 -->
<style>
  .el-header {
    background-color: #409EFF;
    color: #ffffff;
    line-height: 60px;
    font-size: 28px;
  }

  .el-aside {
    background-color: #e3e3e3;
    width: 180px !important;
  }

  .el-pagination {
    text-align: center;
    margin-top: 10px;
  }

  .el-table {
    margin-top: 10px;
  }
</style>

分别启动前后端项目进行测试（注：设置后端项目与前端项目端口号对应，在后端Controller层配置跨域：@CrossOrigin(origins = “*”)

1.9 moment.js 格式 Date 类型

1.在 main.js 引入 moment.js

import moment from 'moment'

2.在日期列添加属性

<el-table-column
    align="center"
    prop="createTime"
    label="时间"
    :formatter="formatDate"
    width="180">
</el-table-column>

3.在methods中添加对应的的方法

methods:{
    formatDate(row, column, currValue) {
      return moment(currValue).format('YYYY-MM-DD HH:mm:ss');
    }
}

1.10 分页

1.修改 data

data(){
    return{
      musics:[],
      total:0,
      pageSize:0
    }
  },

2.添加分页标签

<el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    @current-change="toPage">
</el-pagination>

3.修改 methods

methods:{
    formatDate(row,column,currVal){
      return moment(currVal).format("YYYY-MM-DD")
    },
    toPage(currPage){
      this.axios.get('/music/findByPage?pageNum='+currPage)
              .then(resp => {
                // resp.data才是实际的数据本身
                this.musics = resp.data.list;
                //alert(this.musics)
                this.total = resp.data.total
                this.pageSize = resp.data.pageSize
              })
    }
  },

4.修改 mounted

mounted() {

    this.axios.get('/music/findByPage')
            .then(resp => {
              // resp.data才是实际的数据本身
              this.musics = resp.data.list;
              //alert(this.musics)
              this.total = resp.data.total
              this.pageSize = resp.data.pageSize
            })
  },

1.11 删除

1.添加标签

<el-table-column label="操作">
  <template slot-scope="scope">
   <el-button
    size="mini" type="primary" icon="el-icon-edit"
    @click="updateById(scope.row.musicId)">编辑</el-button>
   <el-button
    size="mini" type="danger" icon="el-icon-delete"
    @click="deleteById(scope.row.musicId)">删除</el-button>
 </template>
</el-table-column>

2.修改 data 以及 methods

  data(){
    return{
      musics:[],
      total:0,
      pageSize:0,
      currentPage:1
    }
  },

  methods:{
    formatDate(row,column,currVal){
      return moment(currVal).format("YYYY-MM-DD")
    },
    toPage(currPage){
      this.axios.get('/music/findByPage?pageNum='+currPage)
              .then(resp => {
                // resp.data才是实际的数据本身
                this.musics = resp.data.list;
                //alert(this.musics)
                this.total = resp.data.total
                this.pageSize = resp.data.pageSize
                this.currentPage = resp.data.pageNum
              })
    },
    deleteById(musicId){

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.axios.get('/music/deleteById?musicId='+musicId)
                .then(resp => {
                  if(resp.data == 'success'){
                    this.toPage(this.currentPage);
                  }
                })

        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },

3.如果删除成功，页面没有跳转，需要去后端配置 pagehelper

pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true

1.12 添加

1.在 el-main 标签中增加添加按钮

<el-button size="mini" type="success" @click="dialogVisible = true">添加</el-button>

2.添加 add 的对话框

      <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">

        <el-form :model="musicModel" :rules="musicRules" ref="musicForm">
          <el-form-item label="id" prop="musicId">
            <el-input v-model="musicModel.musicId"></el-input>
          </el-form-item>
          <el-form-item label="歌曲" prop="musicName">
            <el-input v-model="musicModel.musicName"></el-input>
          </el-form-item>
          <el-form-item label="专辑" prop="musicAlbumName">
            <el-input v-model="musicModel.musicAlbumName"></el-input>
          </el-form-item>
          <el-form-item label="歌手" prop="musicArtistName">
            <el-input v-model="musicModel.musicArtistName"></el-input>
          </el-form-item>
          <el-form-item label="时间" prop="createTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="musicModel.createTime" style="width: 100%;"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('musicForm')">立即创建</el-button>
            <el-button @click="resetForm('musicForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>

3.修改 data

  data(){
    return{

      musics:[],
      total:0,
      pageSize:0,
      currentPage:1,
      dialogVisible: false,

      musicModel: {
        musicId: '',
        musicName: '',
        musicAlbumName: '',
        musicArtistName: '',
        createTime: ""
      },
      musicRules: {
        musicId: [
          {required: true, message: '请输入id', trigger: 'blur'}
        ]
      }
    }
  },

4.在 method 中添加方法

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post('/music/save',this.musicModel)
                  .then(resp => {
                    if(resp.data == "success"){
                      this.$refs[formName].resetFields();//清空下一次添加表单中的数据
                      this.dialogVisible = false //关闭添加的对话框
                      this.toPage(this.currentPage);
                    }
                  })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

5.后端Controller方法实现

//添加
    @RequestMapping("save")
    public String add(@RequestBody TbMusic tbMusic){
    
        tbMusicService.add(tbMusic);

        return "success";
    }

1.12 修改

1.在 data 中添加属性

updatedialogVisible:false

2.创建对话框

      <el-dialog
              title="提示"
              :visible.sync="updatedialogVisible"
              width="30%"
              :before-close="handleClose">

        <el-form :model="musicModel" :rules="musicRules" ref="updateForm">
          <el-form-item label="id" prop="musicId">
            <el-input v-model="musicModel.musicId" readonly="readonly"></el-input>
          </el-form-item>
          <el-form-item label="歌曲" prop="musicName">
            <el-input v-model="musicModel.musicName"></el-input>
          </el-form-item>
          <el-form-item label="专辑" prop="musicAlbumName">
            <el-input v-model="musicModel.musicAlbumName"></el-input>
          </el-form-item>
          <el-form-item label="歌手" prop="musicArtistName">
            <el-input v-model="musicModel.musicArtistName"></el-input>
          </el-form-item>
          <el-form-item label="时间" prop="createTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="musicModel.createTime" style="width: 100%;"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="updateMusic('updateForm')">修改</el-button>
            <el-button @click="resetForm('updateForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>

3.在 methods 中添加方法

updateById(musicId){

      this.updatedialogVisible =true;

      this.axios.get('/music/findById?musicId='+musicId)
              .then(resp => {
                  this.musicModel = resp.data;
              })
    },

    updateMusic(){
      this.axios.post('/music/updateMusic',this.musicModel)
              .then(resp => {
                if(resp.data == "success"){
                  this.updatedialogVisible = false //关闭添加的对话框
                  this.toPage(this.currentPage);
                }
              })
    }

4.编写 Controller 中的方法

@RequestMapping("updateMusic")
public String updateMusic(@RequestBody TbMusic tbMusic){

    tbMusicService.updateMusic(tbMusic);
    return "success";
}

二、Vue组件间的参数传递

2.1 在项目中创建子组件

1.在 Components 目录下创建 MyComponent 子组件，并编写

<template>
    <div>
        MyComponent...
        {{ MyTitle }}
        
        <button @click="MyMethod('bye vue')">修改内容</button>
    </div>
</template>

<script>
    export default {
        name: "MyComponent",

        //props:["MyTitle"],

        props:{
            MyTitle:{
                type:String,
                required:true,
                default:'defaultMyTitle'
            },

            MyMethod:{
                type: Function
            }
        }
    }
</script>

<style scoped>

</style>

2.2 注册子组件

在main.js中注册子组件

//导入子组件
import MyComponent from "./components/MyComponent";
//全局注册
Vue.component("MyComponent",MyComponent)

2.3 在App.vue中使用组件并传递参数

<div id="app">
      <MyComponent :MyTitle="msg" :MyMethod="changeMsg"></MyComponent>
</div>

export default {
 	data(){
    	return {
      		msg:'hello vue!!'
    	}
 	},
  
	methods:{
    	changeMsg(massage){
      		this.msg = massage;
    }
｝

父传子：通过子组件的props部分，来指明可以接收的参数，父组件通过在标签中写明参数的键值对来传递参数。

props是表示一个组件的参数部分，那么props的写法有两种：

1）props:[参数列表]

比如： props:[‘MyProp1’,‘MyProp2’,…]

2）props:{参数名1:{type:String,required:true,default:‘XX’},参数名2:{…}})

子传父：通过方法来传，子传给父，父还可以传给子

九离⠂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【日常学习】使用Vue-Cli搭建Vue项目

一、使用Vue-Cli搭建Vue项目1.1 vue-cli 介绍cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。1.2 node.js 介绍及安装node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。
复制链接

扫一扫

专栏目录