Введение
Node.jsНесомненно, это важная веха для фронтенда: по сравнению с набирающей популярность сегодня технологией Node.js — это не только бонус, но и навык, которым должны овладеть фронтендеры. Express основан на платформе Node.js — быстрой, открытой и минималистичной среде веб-разработки, которая стала самой популярной средой для Node.js, поэтому использование Express для разработки веб-серверов — хороший и надежный выбор. Однако после инициализации Express это не готовый проект веб-сервера с различными функциями, такими как:Соединение с MySQL, аутентификация с помощью jwt-токена, шифрование md5, модуль маршрутизации промежуточного программного обеспечения, обработка исключений, междоменная конфигурация, автоматический перезапускДля ряда общих функций разработчикам необходимо вручную настроить и установить плагины и инструменты для улучшения функций.Если вы не знакомы с разработкой веб-сервера или средой Express, эта работа потребует огромных ресурсов.
Автор этой статьи завершил построение базовой сервисной архитектуры на основе реального боевого опыта проекта, и проект был выложен на github для вашего изучения и ознакомления (если есть какие-либо недостатки, пожалуйста, покритикуйте и исправьте их). ), надеясь уменьшить свою рабочую нагрузку и выполнить ее более эффективно. Работайте и получайте больше времени для совершенствования своих способностей. 🤭
Исходный адрес внутреннего интерфейса API 👉:GitHub.com/Джек Чен012…
Адрес источника внешнего интерфейса 👉:GitHub.com/Джек Чен012…
Если вы считаете, что статья неплохая, не забудьте поставить лайк 👍 или звездочку ❤️, ваши лайки и звездочки — это мотивация для автора писать все больше и больше интересных статей!
Прежде чем поделиться, давайте познакомимсяNode.js、ExpressЭто все мелочи.
Node.js
Проще говоря, Node.js — это JavaScript, работающий на сервере.
Node.js — это платформа, построенная на среде выполнения Chrome JavaScript.
Node.js — это среда JavaScript на стороне сервера, управляемая событиями. Основанный на движке Google V8, движок V8 выполняет JavaScript очень быстро и имеет очень хорошую производительность.
Express
Express — это лаконичная и гибкая платформа веб-приложений Node.js, которая предоставляет ряд мощных функций, помогающих создавать различные веб-приложения, а также многофункциональные инструменты HTTP. Используйте Express, чтобы быстро создать полнофункциональный веб-сайт.
Основные функции экспресс-фреймворка:
- Промежуточное ПО можно настроить для ответа на HTTP-запросы.
- Таблицы маршрутизации определены для выполнения различных действий HTTP-запросов.
- HTML-страницы можно отображать динамически, передавая параметры шаблону.
2. Разделение переднего и заднего концов
Стек технологий, принятый во внешнем проекте, основан наVue + iView, используйте vue-cli для создания внешнего интерфейса, а технологический стек, используемый во внутреннем проекте, основан наNode.js + Express + MySQL, внутренний сервер, созданный с помощью Express.
Онлайн-демонстрация Адрес DEMO 👉:http://106.55.168.13:8082/
Некоторые скриншоты
3. Передняя часть
3.1 Базовая среда
Подготовка перед разработкой, соответствующая конфигурация операционной среды выглядит следующим образом:
| имя инструмента | номер версии |
|---|---|
| node.js | 10.16.2 |
| npm | 6.9.0 |
запустить проект
1> Загрузите и установите зависимости
git clone https://github.com/jackchen0120/todo-vue-admin.git
cd todo-vue-admin
установка npm или пряжа
2> режим разработки
npm run serve
После запуска перейдите по адресу: http://localhost:8082.
3> упаковка для производственной среды
npm run build
3.2 Структура каталогов
│ package.json // npm包管理所需模块及配置信息
│ vue.config.js // webpack配置
├─public
│ favicon.ico // 图标
│ index.html // 入口html文件
└─src
│ App.vue // 根组件
│ main.js // 程序入口文件
├─assets // 存放公共图片文件夹
├─components
│ Footer.vue // 页面底部公用组件
│ Header.vue // 页面头部公用组件
├─router
│ index.js // 单页面路由注册组件
├─store
│ │ index.js // 状态管理仓库入口文件
│ └─modules
│ userInfo.js // 用户模块状态管理文件
├─styles
│ base.scss // 基础样式文件
├─utils
│ api.js // 统一封装API接口调用方法
│ network.js // axios封装与拦截器配置
│ url.js // 自动部署服务器环境
│ valid.js // 统一封装公用模块方法
└─views
Home.vue // 首页界面
Login.vue // 登录界面
3.3 Стек технологий
- vue2.6
- vue-router
- vuex
- axios
- webpack
- ES6/7
- flex
- iViewUI
3.4 Функциональные модули
- войти (выйти)
- регистр
- помнить пароль
- Забыли пароль (сменить пароль)
- todoList CRUD
- Зажгите красную звезду
- Фильтр условия запроса
3.5 Реализация кода
3.5.1 Глобальная установка vue-cli4
npm install -g @vue/cli
#Установить указанную версию
npm install -g @vue/cli@4.4.0
#OR
yarn global add @vue/cli
3.5.2 vue-cli4 для создания проекта и запуска
vue create todo-vue-admin
cd todo-vue-admin
npm run serve
3.5.3 Конфигурация разработки
Добавьте в корневой каталог проектаvue.config.jsфайл, информация о конфигурации показана на рисунке:
3.5.4 Прочие вопросы
После завершения создания каркаса в соответствии с описанными выше шагами установите и настройте необходимые зависимости, такие как axios, vue-router, view-design, sass-loader и node-sass, и подготовьтесь к загрузке.
3.5.5 Реализовать интерфейсный вход и функцию регистрации
Сначала создайте новый в папке представленийlogin.vueкомпонента, напишите статическую страницу регистрации входа. После успешного входа в систему сохраните токен, возвращенный при входе в систему, в браузере и перейдите на домашнюю страницу. Создайте новый в папке представленийhome.vueКомпонент, который отображает страницу после успешного входа в систему и получает основную информацию о пользователе.В правом верхнем углу домашней страницы отображается аватар пользователя, изменение пароля, выход из системы и другие функции. код показывает, как показано ниже:
<template>
<div class="login-container">
<div class="pageHeader">
<img src="../assets/logo.png" alt="logo">
<span>TODOList区块链管理平台</span>
</div>
<div class="login-box">
<div class="login-text" v-if="typeView != 2">
<a href="javascript:;" :class="typeView == 0 ? 'active' : ''" @click="handleTab(0)">登录</a>
<b>·</b>
<a href="javascript:;" :class="typeView == 1 ? 'active' : ''" @click="handleTab(1)">注册</a>
</div>
<!-- 登录模块 -->
<div class="right-content" v-show="typeView == 0">
<div class="input-box">
<input
autocomplete="off"
type="text"
class="input"
v-model="formLogin.userName"
placeholder="请输入登录邮箱/手机号"
/>
<input
autocomplete="off"
type="password"
class="input"
v-model="formLogin.userPwd"
maxlength="20"
@keyup.enter="login"
placeholder="请输入登录密码"
/>
</div>
<Button
class="loginBtn"
type="primary"
:disabled="isDisabled"
:loading="isLoading"
@click.stop="login">
立即登录
</Button>
<div class="option">
<Checkbox class="remember" v-model="checked" @on-change="checkChange">
<span class="checked">记住我</span>
</Checkbox>
<span class="forget-pwd" @click.stop="forgetPwd">忘记密码?</span>
</div>
</div>
<!-- 注册模块 -->
<div class="right_content" v-show="typeView == 1">
<div class="input-box">
<input
autocomplete="off"
type="text"
class="input"
v-model="formRegister.userName"
placeholder="请输入注册邮箱/手机号"
/>
<input
autocomplete="off"
type="password"
class="input"
v-model="formRegister.userPwd"
maxlength="20"
@keyup.enter="register"
placeholder="请输入密码"
/>
<input
autocomplete="off"
type="password"
class="input"
v-model="formRegister.userPwd2"
maxlength="20"
@keyup.enter="register"
placeholder="请再次确认密码"
/>
</div>
<Button
class="loginBtn"
type="primary"
:disabled="isRegAble"
:loading="isLoading"
@click.stop="register">
立即注册
</Button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.login-container {
background-image: url('../assets/bg.png');
background-position: center;
background-size: cover;
position: relative;
width: 100%;
height: 100%;
.pageHeader {
padding-top: 30px;
padding-left: 40px;
img {
vertical-align: middle;
display: inline-block;
margin-right: 15px;
}
span {
font-size: 18px;
display: inline-block;
vertical-align: -4px;
color: rgba(255, 255, 255, 1);
}
}
.login-box {
position: absolute;
left: 64vw;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
box-sizing: border-box;
text-align: center;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.3);
border-radius: 2px;
width: 420px;
background: #fff;
padding: 45px 35px;
.option {
text-align: left;
margin-top: 18px;
.checked {
padding-left: 5px;
}
.forget-pwd, .goback {
float: right;
font-size: 14px;
font-weight: 400;
color: #4981f2;
line-height: 20px;
cursor: pointer;
}
.protocol {
color: #4981f2;
cursor: pointer;
}
}
.login-text {
width: 100%;
text-align: center;
padding: 0 0 30px;
font-size: 24px;
letter-spacing: 1px;
a {
padding: 10px;
color: #969696;
&.active {
font-weight: 600;
color: rgba(73, 129, 242, 1);
border-bottom: 2px solid rgba(73, 129, 242, 1);
}
&:hover {
border-bottom: 2px solid rgba(73, 129, 242, 1);
}
}
b {
padding: 10px;
}
}
.title {
font-weight: 600;
padding: 0 0 30px;
font-size: 24px;
letter-spacing: 1px;
color: rgba(73, 129, 242, 1);
}
.input-box {
.input {
&:nth-child(1) {
/*margin-top: 10px;*/
}
&:nth-child(2),
&:nth-child(3) {
margin-top: 20px;
}
}
}
.loginBtn {
width: 100%;
height: 45px;
margin-top: 40px;
font-size: 15px;
}
.input {
padding: 10px 0px;
font-size: 15px;
width: 350px;
color: #2c2e33;
outline: none; // 去除选中状态边框
border: 1px solid #fff;
border-bottom-color: #e7e7e7;
background-color: rgba(0, 0, 0, 0); // 透明背景
}
input:focus {
border-bottom-color: #0f52e0;
outline: none;
}
.button {
line-height: 45px;
cursor: pointer;
margin-top: 50px;
border: none;
outline: none;
height: 45px;
width: 350px;
background: rgba(216, 216, 216, 1);
border-radius: 2px;
color: white;
font-size: 15px;
}
}
// 滚动条样式
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.4);
}
//设置更改input 默认颜色
::-webkit-input-placeholder {
/* WebKit browsers */
color: #bebebe;
font-size: 16px;
}