vue项目搭建通过vue-cli包括组件路由的使用实现基本的前端项目全流程

简介github上项目地址:https://github.com/comonly/javaweb_blog/tree/master/blog_diverse_frontend 1. 项目通过:vue init webpack project-name 自动构建。 2. 使用 axios 异步请求数据。 3. 样式使用 ElementUI。 利用vue-cli来搭建vue项目——通过npm创建一个vue项目:http://comonly.cn/p/1030

github上项目地址:https://github.com/comonly/javaweb_blog/tree/master/blog_diverse_frontend


1. 项目通过:vue init webpack project-name 自动构建。
2. 使用 axios 异步请求数据。
3. 样式使用 ElementUI。


利用vue-cli来搭建vue项目——通过npm创建一个vue项目:http://comonly.cn/p/1030.html


src目录main.js文件中配置需要用到的工具。

同时要在 package.json 文件中添加需要的 模块 。

"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"element-ui": "^2.4.8",
"axios": "^0.18.0",
"vue-axios": "^2.1.4"
}


接着在src/components目录下创建组件。

然后在src/router目录下添加路由。

新加评论 评论标题:

文章评论

    src目录main.js文件

        2019-10-27    
    修改 删除
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css';

    Vue.config.productionTip = false

    //elm ul组件
    Vue.use(ElementUI);

    //全局引入axios
    //需要npm两个包axios和vue-axios
    Vue.use(VueAxios,axios);
    //axios相关配置 //更多配置待处理
    axios.defaults.baseURL = 'http://localhost:8080/blog_spring_backend/';

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    组件中嵌套组件

        2019-10-27    
    修改 删除
    <template>
      <div class="hello">
        <el-link type="primary" href="/#/detail/PassageModify">
            <el-button  icon="el-icon-edit">
                添加新文章
            </el-button>
        </el-link>

        <MainLeft></MainLeft>

      </div>
    </template>

    <script>
    import MainLeft from '@/components/index/MainLeft'
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      components: {
        MainLeft
      },
      methods: {
        toDetail () {
          this.$router.push({name: 'PassageDetail', params: { val: 'row' }})
        }
      }
    }
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    a {
      color: #42b983;
    }
    </style>

    通过a标签跳转及axio请求数据

        2019-10-27    
    修改 删除
    <template>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="pnumber"
          label="编号"
          width="180">
          <template slot-scope="scope">
            <el-link type="primary" :href="'/#/detail/PassageDetail?id=' + scope.row.pnumber">查看<i class="el-icon-view el-icon--right"></i> </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="ptitle"
          label="标题">
        </el-table-column>
        <el-table-column
          prop="ptime"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="plabel"
          label="关键字"
          width="180">
        </el-table-column>
        <el-table-column
          prop="pcoming"
          label="来源">
        </el-table-column>
      </el-table>
    </template>

    <script>
    export default {
      name: 'MainLeft',
      mounted(){
        this.getData(); //获取数据前先取数据
      },
      data () {
        return {
          tableData: []
        }
      },
      methods: {
        getData(){
            var _this=this;
            //需要处理异步请求的问题
            this.axios.get('passage/passIndex')
                .then(function (response) {
                    //将response获得的数据进行处理
                    //将获取到的数据以数组形式传递出去
                    var dataList=response.data;
                    _this.tableData=dataList;
                    _this.$message({
                        message: '查询成功',
                        type: 'success'
                        })
                })
                .catch(function (error) {
                    console.log(error);
                    alert("网络连接错误,无法获取服务器数据,请检查后刷新页面");
                })
        }  
      }
    }
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    a {
      color: #42b983;
    }
    </style>

    通过路由跳转

        2019-10-27    
    修改 删除
    <template>
      <div>   
        <el-button type="primary" @click="deletePassage()">删除</el-button>
        &nbsp;
        <el-link type="primary" :href="'/#/detail/PassageModify?id=' + msg.pnumber">
            <el-button type="warning">
                修改<i class="el-icon-view el-icon--right"></i>
            </el-button>
        </el-link>
        
        <p>{{ msg.pnumber }}</p>
        <p>{{ msg.ptitle }}</p>
        <p>{{ msg.ptime }}</p>
        <p>{{ msg.plabel }}</p>
        <p v-html="msg.pcount"></p>
        <p>{{ msg.pcoming }}</p>
        <p>{{ msg.pcomingUrl }}</p>
        <p>{{ msg.pimage }}</p>
        <p>{{ msg.pkind }}</p>
        <p>{{ msg.pbelong }}</p>
        <p>{{ msg.pdescribe }}</p>
      </div>
    </template>

    <script>
    export default {
        
      name: 'PassageDetail',
      mounted(){
        this.getData(); //获取数据前先取数据
      },
      data () {
        return {
          msg: {}
        }
      },
      methods: {
        deletePassage(){

            this.$confirm('确认删除?')
                .then(_ => {
                    this.sendDelete();
                    this.$router.replace({path: '/'});
                })
                .catch(_ => {});

        },
        sendDelete(){
            var _this=this;
            //需要处理异步请求的问题
            this.axios.get('/passage/passDelete?id=' + this.msg.pnumber)
                .then(function (response) {
                    //将response获得的数据进行处理
                    //将获取到的数据以数组形式传递出去
                    var dataList=response.data;
                    _this.msg=dataList;
                    _this.$message({
                        message: '删除成功',
                        type: 'success'
                        });

                })
                .catch(function (error) {
                    console.log(error);
                    alert("网络连接错误,无法获取服务器数据,请检查后刷新页面");
                })
        },
        getData(){
            var _this=this;
            //需要处理异步请求的问题
            this.axios.get('/passage/passDetail?id=' + this.$route.query.id)
                .then(function (response) {
                    //将response获得的数据进行处理
                    //将获取到的数据以数组形式传递出去
                    var dataList=response.data;
                    _this.msg=dataList;
                    _this.$message({
                        message: '查询成功',
                        type: 'success'
                        });

                })
                .catch(function (error) {
                    console.log(error);
                    alert("网络连接错误,无法获取服务器数据,请检查后刷新页面");
                })
        }
            
      }
    }
    </script>

    post方式请求

        2019-10-27    
    修改 删除
    <template>
      <div>
        <el-button type="primary" @click="submitPassage()">提交<i class="el-icon-view el-icon--right"></i></el-button>
        
    <div style="margin: 20px;"></div>
    <el-form :label-position="labelPosition" label-width="80px" :model="msg">
      <el-form-item label="编号">
        <el-input v-model="msg.pnumber" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="msg.ptitle"></el-input>
      </el-form-item>
      <el-form-item label="时间">
        <el-input v-model="msg.ptime" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-input v-model="msg.plabel"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="msg.pcount"></el-input>
      </el-form-item>
      <el-form-item label="来源">
        <el-input v-model="msg.pcoming"></el-input>
      </el-form-item>
      <el-form-item label="来源地址">
        <el-input v-model="msg.pcomingUrl"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="msg.pdescribe"></el-input>
      </el-form-item>
    </el-form>

      </div>
    </template>

    <script>
    export default {
        
      name: 'PassageDetail',
      mounted(){
        if(!(this.$route.query.id > 0))return;
        this.getData(); //获取数据前先取数据
      },
      data () {
        return {
          labelPosition: 'right',
          msg: {}
        }
      },
      methods: {
        modifyPassage(){
            var _this=this;
            //需要处理异步请求的问题
            this.axios({
                    method:'post',
                    url:'/passage/passChangeSubmit',
                    data:_this.msg,
                })
                .then(function (response) {
                    //将response获得的数据进行处理
                    //将获取到的数据以数组形式传递出去
                    var dataList=response.data;
                    _this.msg=dataList;
                    _this.$message({
                        message: '修改成功',
                        type: 'success'
                        });

                })
                .catch(function (error) {
                    console.log(error);
                    alert("网络连接错误,无法获取服务器数据,请检查后刷新页面");
                });
        },
        addPassage(){
            var _this=this;
            //需要处理异步请求的问题
            this.axios({
                    method:'post',
                    url:'/passage/passAddSubmit',
                    data:_this.msg,
                })
                .then(function (response) {
                    //将response获得的数据进行处理
                    //将获取到的数据以数组形式传递出去
                    var dataList=response.data;
                    _this.msg=dataList;
                    _this.$message({
                        message: '添加成功',
                        type: 'success'
                        });

                })
                .catch(function (error) {
                    console.log(error);
                    alert("网络连接错误,无法获取服务器数据,请检查后刷新页面");
                })
        },
        submitPassage(){
            if(this.msg.pnumber)
            {
                this.modifyPassage();
                this.getData();
            }
            else{
                this.addPassage();
                this.$router.replace({path: '/'});
            }
        },
        getData(){
            var _this=this;
            //需要处理异步请求的问题
            this.axios.get('/passage/passDetail?id=' + this.$route.query.id)
                .then(function (response) {
                    //将response获得的数据进行处理
                    //将获取到的数据以数组形式传递出去
                    var dataList=response.data;
                    _this.msg=dataList;
                    _this.$message({
                        message: '查询成功',
                        type: 'success'
                        });

                })
                .catch(function (error) {
                    console.log(error);
                    alert("网络连接错误,无法获取服务器数据,请检查后刷新页面");
                })
        }
            
      }
    }
    </script>

    router/index.js中路由配置

        2019-10-27    
    修改 删除


    import Vue from 'vue'
    import Router from 'vue-router'
    //导入其他js文件的声明
    import passage from './passage.js'

    Vue.use(Router)

    //passage[0].children=passage[0].children;//.concat(addDev,manageDev,repairDev,scrapDev,repaiInfor);


    //通过concat连接passage.js文件,这样可以把不同模块的js放在不同文件中定义。

    var routerInfo = [].concat(passage)

    export default new Router({
      routes: [].concat(routerInfo)
    })


    单个模块中的路由定义,需要在index.js中引入使用

        2019-10-27    
    修改 删除

    import HelloWorld from '@/components/index/HelloWorld'
    import PassageDetail from '@/components/detail/PassageDetail'
    import PassageModify from '@/components/detail/PassageModify'

    export default([
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/detail/PassageDetail',
            name: 'PassageDetail',
            component: PassageDetail
        },
        {
          path: '/detail/PassageModify',
          name: 'PassageModify',
          component: PassageModify
        }
      ]
    )

评论列表
src目录main.js文件
组件中嵌套组件
通过a标签跳转及axio请求数据
通过路由跳转
post方式请求
router/index.js中路由配置
单个模块中的路由定义,需要在index.js中引入使用