Адрес проекта на гитхабе

визуализация

целевая страница

Запрос

новый

Исправлять

удалять

Страница сведений

стек технологий

vue axios vue-router express mongo element iconfont scss

предисловие

Полгода назадexpress+mongodb+vueПроект, который примерно дан, чтобы построить техническую точку и идеи, которые вам нуждаются от нуля, чтобы построить спереди и основные проекты, а также некоторые ямы, встречающиеся в процессе разработки.

После этого я получил личные сообщения от некоторых друзей, включаяgithubпредложенный вышеissue. Резюмируя следующие два момента.

1. Ошибка запуска проекта
2. Надеюсь, что случай может быть более обогащен (разбиение на страницы, условный запрос)

Проблема в том, что проект сообщает об ошибке 404, заключается в том, что проект является интерфейсным и внутренним проектом, а не только нужно пройтиnpm run devДля запуска фронтенда также необходимо пройти через терминалnode app.jsЗапустите фон. Здесь все должны быть внимательны!

Эта версия является обновленной версией предыдущей версии.В проекте были оптимизированы некоторые коды, а также добавлены некоторые новые модули и функциональные точки, чтобы сделать проект более полным.Есть примерно следующие модули.

добавить модуль

• страница авторизации
• Условный запрос
• Пейджинговый запрос
• локальный кеш
• Использование значков
• использование scss
• ......

намекать

Эта статья в основном посвященаНовое в этой версииНекоторые технические моменты заявления о расширении. Я не буду слишком много объяснять идею реализации всего проекта front-end и back-end. Если вам не очень понятны идеи построения всего проекта, рекомендуется сначала прочитать предыдущую версию.express+mongodb+vue.

Очень рекомендую съездить на мойgithub, загрузите проект на локальный сервер, запустите проект, следуйте идеям этой статьи, чтобы провести со мной глубокую дискуссию, если у вас есть какие-либо вопросы, добро пожаловать в личное сообщение мне!

текст

Инкапсуляция общих служебных функций

Потому что в реальных проектах нам нужно частое использованиеajaxПолучение данных, предыдущая версия была сделана с использованиемvue-resourceЗавершено, но, поскольку официальная версия больше не поддерживается, эта версия принимает официальное рекомендуемое использование.axios. Мы можем легко реализовать пользовательскиеaxiosИнстансы, перехватчики, запрос на добавление полей и другие функции.

существуетsrcПод каталогом находитсяutilsПапка, которая используется для хранения некоторых служебных функций, эти служебные функции должны быть универсальными. То есть на него можно ссылаться на разных страницах компонентов. Для достижения цели определения один раз, используя много раз. Классификация функций конкретного класса инструментов примерно включает следующие моменты.

• экземпляр axios
• Часто используемые функции регулярной проверки
• cookie, sessionStorage добавить, получить, удалить методы
• ......

Короче говоря, студенты, занимающиеся разработкой, должны думать об упрощении бизнес-логики, а часто используемые модули должны быть независимыми.

Советы: Названия файлов и функций должны быть как можно более стандартными.Не думайте что к чему, попробуйте назвать на соответствующем английском языке.Если с английским плохо, идите на Baidu.

Дело о целевой странице

Разумной логикой входа в систему должны быть следующие два момента:

1. Прежде чем запрашивать список героев, пользователю сначала необходимо войти в систему, в противном случаеперенаправитьна страницу входа
2. Для зарегистрированных пользователей вы можете напрямую получить доступ к странице списка

Чтобы реализовать приведенную выше логику, мы можем использоватьvue-routerНавигация Forward Guard предусмотрена вbeforeEachСотрудничать路由重定向выполнить. Конкретная ссылка на кодpermission.jsдокумент.

Советы: здесь, чтобы напомнить всем о следующем в навигации по маршрутуnextОбязательно обратите внимание на использование параметров, которые по-разному действуют с параметрами и без них. В процессе разработки из-за этого столкнулсяБесконечная петляяма.

Более богатый выбор иконок

Фронтенд-фреймворк, используемый в этом проектеelementХотя он предоставляет нам некоторые часто используемые значки, его нельзя удовлетворить в реальных сценариях разработки. Если вы все еще внедряете иконки с картинками, я просто хочу послать вам два слова——Потрясающий!

алибабаБиблиотека значков может помочь нам решить проблему несовершенных значков, предоставляемых фреймворком.Есть три способа их использования, и вы можете понять их преимущества и недостатки. В этом проекте используетсяunicodeСпособ.

Прежде чем разрабатывать проект, мы можем阿里巴巴iconfontСоздайте новый проект сверху, а затем перейдите в библиотеку значков, чтобы найти соответствующий значок и добавить его в проект. Затем скачайте его локально и импортируйте в проект.

проектsrcниже каталогаassetsВ папке в основном хранятся некоторые статические ресурсы, напримерcss image iconЖдать.

затем вmain.jsВ файл вносится css-файл соответствующей иконки.

#main.js

import "./assets/icon/iconfont.css"

Советы: Именование префикса библиотеки иконок и наименование иконок должны быть стандартизированы, иначе позже вы можете столкнуться с массой неприятностей. Главное сказано трижды: Соглашения об именах! Соглашения об именах! Соглашения об именах!

Использование scss

В предыдущих версиях этот стиль использовался сcssНазвано так, чтобы что-то подобное происходило...

.container{
    width:...
    margin:...
}

.container header{
    padding:...
    border-radius:...
    box-shadow:...
}
.container header .title{
    background:...
    color:...
    font-size:...
}

Хотя с этим методом проблем нет, но писать его очень больно, и когда таких кодов будет слишком много, код будет выглядеть очень некрасиво.

Для того, чтобы производительность была лучше, сила выше, а код красивее, поэтому я пошел учиться использовать егоscss, грубо разделенный на следующие три шага:

第一步：cmd终端或者**vscode**终端输入：
npm  install sass-loader --save-dev
npm install node-sass --sava-dev

第二步：在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
}

第三步： 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

Затем используйте синтаксис scss для написания вышеуказанных правил css, он становится следующим форматом:

.container{
    width:...
    margin:...
        header:{
            padding:...
            border-radius:...
            box-shadow:...
                .title{
                    background:...
                    color:...
                    font-size:...
                }
        }
}

Разница и плюсы и минусы двух стилей, я думаю, вы должны понять без лишних слов.

Советы: К препроцессорам css относятся less, sass, scss и т.д. Они имеют свои особенности и стили, но так же верно, все, что вам нужно сделать, это освоить базовые навыки css.

sessionStorage реализует локальное кэширование

Возьмем реальный сценарий этого случая в качестве примера, когда пользователь переходит со страницы списка на страницу сведений, а затем возвращается на страницу списка, условия запроса и результаты запроса страницы списка должны все еще существовать там. Вместо того, чтобы требовать от пользователя повторного ввода условий запроса для второго запроса, преимущества этого в основном заключаются в следующем:

Это больше соответствует реальным сценариям использования и снижает затраты пользователей на использование.

В конце концов, фронтенд-инженеры используют свои лучшие технические возможности, чтобы сделать пользовательский опыт все лучше и лучше!

ЗдесьидеиДа:

1.用户输入查询条件后，进行列表查询

2.用户点击某条数据的相信按钮，跳转到详情页面（这时我们要去保存用户的查询条件和当前的页数）

3.用户从详情页返回列表页（在mounted钩子函数中，判断缓存中是否存在缓存数据，如果存在的话，则用缓存数据去进行查询）

注意用户每次进行查询后，我们需要将缓存给删除，否则用户可能刷新页面后缓存仍然存在，这里我们将添加缓存的时机选在（用户点击详情按钮的那一刻）

Грубый код:

#List.vue组件中

#点击详情按钮函数
toDetail(id){
    var queryParmas = {
        ...
        ...
        ...
    };
    //在本地缓存中存储查询条件
    sessionStorage.queryParmas = JSON.stringify(queryParmas);
    
}

#查询函数
search(){
    ...
    ...
    ...
    //每次查询数据后，删除缓存
    sessionStorage.removeItem("queryParmas");
}

#mounted钩子函数
mounted(){
    //进入页面判断是否存在缓存，如果有缓存，直接查询
    var sessionObj = sessionStorage.getItem("queryParmas");
    if(sessionObj){
        //取出缓存数据，包括上次查询条件和上次查询页数，进行查询
    }
}

Советы: при использовании подкачки в элементе есть некоторые подводные камни.При использовании вышеприведенных кэшированных данных для запроса могут появиться некоторые ошибки в номерах страниц. Я не нашел здесь причину, но эту ошибку можно решить, используя метод $nextTick в vue для управления отображением и скрытием пейджинга. Если вам интересно, вы можете узнать.

##Суммировать

В этой статье основное внимание уделяется некоторым функциональным точкам и реализации решений, а также выдвигаются некоторые личные предложения. Если вы будете внимательны, вы обязательно обнаружите, что на самом деле многие моменты, которые я извлек, могут вращаться вокругОптимизация производительности интерфейсаРасширять. Есть еще много веселья, в том числеhttp 浏览器渲染机制 重排、重绘 函数节流、防抖Когда нам нужно учиться, это побуждает нас постоянно оптимизировать наши программы. Наконец-то напишите лучший код!

последнее благословение

Небесно-голубое ждет туманного дождя, а я жду тебя! Ставь ☝️️️, ставь лайк и вперед!

Наступает 2019 год, я надеюсь, что все будет круто! Вот вам, ребята, ранний год!

Оригинальность непростая, а 👣 и лелеять!

Гитхаб-портал

☝️☝️☝️☝️☝️

ruiwei88888@163.com

☝️☝️☝️☝️☝️ Если у вас есть какие-либо вопросы, пожалуйста, напишите мне в личные сообщения!