文章评论

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

    }

  ]

)