小QA学习前端系列之vue实战4

发表于

接上节 我们继续学习

回到router
我们再来看看add路径

1
2
3
4
5
6
{
    path: '/add',
    name: 'add',
    component: resolve => require(['./views/new.vue'], resolve),
    meta: { requiresAuth: true }
}

最后调用的是一个 new.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<template>
    <div>
        <nv-head page-type="主题"
            :show-menu="false"
            :fix-head="true"></nv-head>
        <div class="add-container">
            <div class="line">选择分类：
                <select class="add-tab" v-model="topic.tab">
                    <option value="share">分享</option>
                    <option value="ask">问答</option>
                    <option value="job">招聘</option>
                </select>
                <a class="add-btn" @click="addTopic">发布</a>
            </div>
            <div class="line">
                <input class="add-title" v-model="topic.title"
                        type="text" :class="{'err':err=='title'}"
                        placeholder="标题，字数10字以上" max-length="100"/>
            </div>
            <textarea v-model="topic.content" rows="35" class="add-content"
                :class="{'err':err=='content'}"
                placeholder='回复支持Markdown语法,请注意标记代码'>
            </textarea>
        </div>
    </div>
</template>
<script>
    import $ from 'webpack-zepto';
    import nvHead from '../components/header.vue';
    import {
        mapGetters
    } from 'vuex';
    export default {
        data() {
            return {
                topic: {
                    tab: 'share',
                    title: '',
                    content: ''
                },
                err: '',
                authorTxt: '<br/><br/><a class="from" href="https://github.com/shinygang/Vue-cnodejs">I‘m webapp-cnodejs-vue</a>'
            };
        },
        computed: {
            ...mapGetters({
                userInfo: 'getUserInfo'
            })
        },
        methods: {
            addTopic() {
                console.log(this.userInfo);
                let title = $.trim(this.topic.title);
                let contents = $.trim(this.topic.content);
                if (!title || title.length < 10) {
                    this.err = 'title';
                    return false;
                }
                if (!contents) {
                    this.err = 'content';
                    return false;
                }
                let postData = {
                    ...this.topic,
                    content: this.topic.content + this.authorTxt,
                    accesstoken: this.userInfo.token
                };
                $.ajax({
                    type: 'POST',
                    url: 'https://cnodejs.org/api/v1/topics',
                    data: postData,
                    dataType: 'json',
                    success: (res) => {
                        if (res.success) {
                            this.$router.push({
                                name: 'list'
                            });
                        }
                    },
                    error: (res) => {
                        let error = JSON.parse(res.responseText);
                        this.$alert(error.error_msg);
                        return false;
                    }
                });
            }
        },
        components: {
            nvHead
        }
    };
</script>
<style lang="scss">
    .add-container {
        margin-top: 50px;
        background-color: #fff;
        .line {
            padding: 10px 15px;
            border-bottom: solid 1px #d4d4d4;
            .add-btn {
                color: #fff;
                background-color: #80bd01;
                padding: 5px 15px;
                border-radius: 5px;
            }
            .add-tab {
                display: inline-block;
                width: calc(100% - 140px);
                min-width: 50%;
                font-size: 16px;
                background: transparent;
                 :after {
                    content: 'xe60e';
                }
                ;
            }
            .add-title {
                font-size: 16px;
                border: none;
                width: 100%;
                background: transparent;
                height: 25px;
            }
            .err {
                border: solid 1px red;
            }
        }
        .add-content {
            margin: 15px 2%;
            width: 96%;
            border-color: #d4d4d4;
            color: #000;
        }
        .err {
            border: solid 1px red;
        }
    }
</style>

nv-head设置标题

1
2
3
<nv-head page-type="主题"
    :show-menu="false"
    :fix-head="true"></nv-head>

内容部分
一个option标签来选择具体的分类，一个输入栏 一个textarea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="add-container">
           <div class="line">选择分类：
               <select class="add-tab" v-model="topic.tab">
                   <option value="share">分享</option>
                   <option value="ask">问答</option>
                   <option value="job">招聘</option>
               </select>
               <a class="add-btn" @click="addTopic">发布</a>
           </div>
           <div class="line">
               <input class="add-title" v-model="topic.title"
                       type="text" :class="{'err':err=='title'}"
                       placeholder="标题，字数10字以上" max-length="100"/>
           </div>
           <textarea v-model="topic.content" rows="35" class="add-content"
               :class="{'err':err=='content'}"
               placeholder='回复支持Markdown语法,请注意标记代码'>
           </textarea>
       </div>
   </div>