how wonderful the cain design
第一版模板工程
how-wonderful-the-cain-design é uma versão atualizada do modelo de back-end após a versão v1, baseada em vue.js e element . Atualmente, o projeto modelo integra login , verificação de autoridade , configuração de roteamento , solicitação ajax , simulação , gráficos , página 404 , página 401 e diversas páginas de modelo . Resolva os problemas do pessoal do servidor que desenvolve páginas de gerenciamento de back-end. A seguir, apresentarei os preparativos antes de usar este projeto e como usá-lo. Espero que possa ajudar alguns parceiros com base de front-end fraca.
Este projeto refere-se ao vue-admin-element
Nota : Este projeto usa [email protected]+ version e [email protected]+
Para instalar o nó (8.0+) localmente, você pode baixar a versão de instalação diretamente e seguir as etapas. Após a conclusão da instalação, verifique se a instalação foi bem-sucedida.
node -v
npm -v
O sucesso ocorre quando o número da versão aparece
O projeto inclui principalmente os seguintes pontos técnicos:
Para desenvolvimento no lado do servidor, você só precisa prestar atenção à sintaxe vue, à biblioteca de componentes element-ui, ao método de escrita de solicitação de axios e às especificações de código eslint. Se os gráficos forem úteis, você também deve prestar atenção aos echarts.
**Nota importante:** O uso do eslint é obrigatório no projeto para padronizar a escrita do código. Pode parecer nojento quando você entrar em contato com ele pela primeira vez. Você precisa ir ao site oficial para descobrir quais são os problemas. estão na gramática e como modificá-la. Mas para manutenção posterior, é um investimento extremamente valioso. Então não pense que é complicado, apenas se acostume ^-^
// 结构树
|- build/ ------------------- 组件webpack区
|- config/ ------------------ 组件启动配置区，开发人员可在index.js中配置动态代理（当运行npm run dev时，该动态代理会生效，即可调用服务端接口），也可以修改端口号，防止端口号冲突
|- src/ --------------------- 组件源代码
|- api/ ----------------- 接口编码区
|- assets/ -------------- 图片区
|- components/ ---------- 组件编码区
|- icons/ --------------- 菜单icon svg图标区
|- mock/ ---------------- 模拟接口区
|- permission/ ---------- 路由权限编码区(可以不用修改)
|- router/ --------------- 配置路由区，开发完成的页面都要在这里挂路由，才能展现
|- store/ --------------- 全局缓存注入区，目前登陆的入口从这进入，会缓存用户信息，token信息以及权限信息
|- styles/ -------------- 公共样式区
|- utils/ ---------------- 工具区，开发人员开发的工具集都放在该目录中
|- views/ ---------------- 页面开发区，开发人员开发的页面放在该目录中
|- App.vue --------------- 启动的vue文件
|- index.js -------------- 启动js文件，element-ui是按需加载的，开发人员要根据引用了哪些element组件在该js文件中引入，引入格式参照模板
|- static/ ------------------ static放置一些静态文件，和assets的区别：assets会被编译替换名字，static中的不会被编译，原汁原味
|- .babelrc ----------------- babel 配置文件
|- .eslintignore ------------ eslint ignore配置文件
|- .eslintrc.js ------------- eslint配置文件
|- .gitignore --------------- git忽略提交文件配置
|- .postcssrc.js ------------ postcss配置文件
|- index.html --------------- HTML 模板
|- package-lock.json -------- npm 版本锁定文件，每添加一个依赖都会变化这个，保证对依赖版本的控制
|- package.json ------------- npm 配置文件
|- README.md ---------------- 项目帮助文档
Os diretórios aos quais os desenvolvedores reais precisam prestar mais atenção ao desenvolver páginas são **/src/views e /src/router**. O primeiro grava a página e o último grava as informações de roteamento da página correspondente . o roteamento é usado como um campo de julgamento de permissão no modelo, ou seja, a matriz de permissão retornada pelo servidor é realmente comparada com o nome, e o resultado correspondente é a página de permissão de propriedade do usuário, caso contrário, uma página 401 ou uma página 401. A página 404 será retornada.
O projeto atualmente possui dois usuários configurados: admin e ChartUser. O objetivo principal é testar permissões.
Você pode fazer login sem inserir uma senha, mas deve inserir o número da sua conta.
步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤
Tomando o componente de botão como exemplo, quando for necessário introduzir o componente de botão, você precisará seguir os seguintes passos:
Quando o componente correspondente for encontrado no site oficial, copie o código correspondente
<el-button>默认按钮</el-button>
Introduzir o componente em /src/index.js sob demanda. Se você não sabe como introduzi-lo, pode consultar a introdução sob demanda de todos os componentes e encontrar o componente correspondente para importar.
Leia atentamente como usar este componente, a documentação oficial do site explicará isso de forma muito clara.
O login no projeto modelo usa mockjs para simular o login. As etapas específicas de implementação do login no modelo são:
Perceber:
- A conta no julgamento if não existe e precisa ser modificada. Há um total de três nomes de usuário no modelo, que correspondem a três permissões de usuário. Para simplificar a escrita, na verdade deveria. seja o prompt de retorno da interface após ajustá-la.
- this.$store.dispatch('Login', ...) é a sintaxe do vuex. O objetivo é chamar o método Login em /src/store/modules/user.js para solicitar a interface do servidor e retornar o usuário correspondente. dados armazenados no cache global, é conveniente para chamadas globais.
- Preste atenção ao formato dos parâmetros. Os parâmetros no objeto são fixados em params, e o valor de params é um objeto. Vários parâmetros permitidos pelos axios podem ser colocados no objeto, pois a solicitação get é simulada aqui, portanto, apenas. o parâmetro params é necessário para mais parâmetros, consulte configuração do axios.
Quando você clica para fazer login, o método acima será chamado. O corpo do método realmente chama a interface getInfo em /scr/api/api.js para obter os dados do usuário correspondentes. Entre elas, as quatro rotas de push devem ser usadas. pessoal, independentemente da autoridade. As rotas acessíveis são primeiro inseridas na matriz de rotas e, em seguida, as permissões, as informações do usuário e as informações do token são armazenadas em cache.
Em seguida, chame a interface getInfo. Async (es6) é usado aqui. Aqui você precisa prestar atenção ao result.code. Ele é definido de acordo com o formato da configuração da interface do servidor. de pessoa para pessoa.
Observe que o objeto userMap são os três usuários que simulei. O campo de função é o campo de permissão Comparado com o campo de nome na tabela de configuração de roteamento, o menu no campo de permissão é a página de função para a qual o usuário tem permissões.
No desenvolvimento real, ao modificar a interface de login, o campo role deve estar presente e o formato deve ser consistente com a matriz acima, caso contrário o sistema de permissão será inválido.
Após as quatro etapas acima, todo o processo de login será concluído.
Antes de desenvolver o modelo, negociamos com o pessoal do servidor o uso do jwt para autenticação das informações do usuário.
O fluxo de processamento é que as informações do token serão salvas no cache global ao efetuar login. Cada vez que os dados da interface forem solicitados, o framework salvará automaticamente as informações do token no cabeçalho. página de login e as informações de login serão desconectadas.
É também a interface de login, na qual **commit('SETTOKEN', 'test')** trata o valor do token. No desenvolvimento real do projeto, este teste deve ser substituído pelo token real obtido pelo login.
Caminho:/src/api/server.js
Preste atenção ao julgamento res.code===301 aqui. Após negociação prévia com o pessoal do servidor, quando o token expirar, o código retornado será definido como 301 para identificação. Portanto, o julgamento aqui também é baseado nas configurações do seu próprio projeto, que podem ser código, status, estado, etc. ., que pode ser modificado de acordo com o projeto.
Caminho:/src/router/index.js
O menu e a tabela de roteamento no sistema de modelo são inseparáveis. Em outras palavras, a estrutura hierárquica do menu e da tabela de roteamento são consistentes . Portanto, a tabela de roteamento deve ser escrita de acordo com as regras, caso contrário afetará a exibição do menu!
Você deve primeiro entender as regras de configuração. O menu não pode exceder três níveis , portanto, existem três formatos na tabela de configuração de roteamento.
Observe que o parâmetro de roteamento 401 oculto, quando definido como verdadeiro, significa que a árvore do menu filtrará esta rota e não a exibirá.
O roteamento do painel é um menu de primeiro nível. O formato de escrita do menu de primeiro nível é como acima. Existe apenas uma rota nos filhos.
O parâmetro title em meta representa o nome do menu exibido no menu
icon é o ícone do menu, e o que é lido é o ícone do menu svg no diretório /src/icons/ Portanto, ao fazer seu próprio projeto, você deve pedir ao artista para produzir o ícone do menu no formato svg e depois colocá-lo. no diretório de ícones O valor do parâmetro do ícone é o nome do arquivo dos ícones.
As permissões do menu de primeiro nível correspondem ao nome dos filhos.
A única diferença entre o menu de segundo nível e o menu de primeiro nível é que os filhos são maiores que um e os outros são iguais.
O formato do menu de terceiro nível tem filhos dentro de filhos.
A configuração da tabela de roteamento deve ser configurada de acordo com as instruções acima, caso contrário o efeito desejado não será o desejado. Preste também atenção ao emparelhamento de nome e permissões de menu para controlar a exibição do menu.
Caminho:/src/api/api.js
Todas as interfaces utilizadas na página devem ser definidas neste arquivo para gerenciamento unificado e fácil modificação.
O formato de escrita é o método de escrita fornecido pelo modelo.
No entanto, no desenvolvimento real, você encontrará várias maneiras de transmitir parâmetros, como get, pós-formulário não-formulário, formulário pós-formulário e formulário restante. A seguir estão os modelos de escrita correspondentes para esses formatos.
Nota: Se você precisar passar o parâmetro de cabeçalho de application/x-www-form-urlenconded, o parâmetro deve ser escrito como
const params = { data: {}, headers: { 'content-type': 'application/x-www-form-urlencoded' } }
O envio sem formulário é basicamente igual ao envio com formulário. A diferença é que a atribuição original aos dados deve ser alterada para a atribuição aos parâmetros.
A estrutura do modelo também encapsula uniformemente os parâmetros restantes, e o método de transferência de parâmetros é uma captura de tela.
O desenvolvimento real é todo desenvolvimento local. Use npm run dev para iniciar o serviço localmente. Então surge a questão de como lidar quando uma interface é solicitada.
Na verdade é muito simples, é apenas uma configuração
Caminho:/config/index.js
proxyTable: {
'/cloudfs': {
target: 'http://your_ip_address',
changeOrigin: true,
pathRewrite: {
'^/cloudfs': '/cloudfs'
}
},
'/api': {
target: 'http://your_ip_address',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
},
'/plustek': {
target: 'http://your_ip_address/plustek',
changeOrigin: true,
onProxyReq: function (proxyReq, req, res) {
console.log('获取到', process.env.eimCookie)
proxyReq.setHeader('Cookie', process.env.eimCookie) // 配置cookie方式
},
pathRewrite: {
'^/plustek': ''
}
}
}
Os desenvolvedores podem configurar o proxy conforme necessário
Se o sistema backend tiver seu próprio mecanismo de autenticação, como jwt. Então não há necessidade de considerar a autenticação de informações de cookies.
Se você quiser usar cookies, adicione diretamente a configuração onProxyReq no proxy de configuração acima, insira as informações do cookie nas informações do cabeçalho, salve-as e execute npm run dev novamente.
import chartMaker from '@/components/charts/chartMaker';
components: {
chartMaker,
},
<chart-maker id="chart-small1" height="120px" width="100%" :option.sync="chartOption" :forceRefresh.sync="forceRefreshChart"></chart-maker>
id---不能重复
height---固定高度
width---宽度使用百分比，才能支持自适应，容器宽度由外层容器控制。
option---echarts参数，模板中已经集成了较为常用的图形使用
forceRefresh---强制刷新组件，传入为true时才会强制刷新
getChart1Option() {
const tmpOption = {};
tmpOption.title = {
text: '访问量',
left: '5',
top: '10',
};
tmpOption.tooltip = {
axisPointer: {
lineStyle: {
color: '#57617B',
},
},
position(point, params, dom, rect, size) {
if (point[0] < 30) {
return [0, '50%'];
} else if (point[0] > (size.viewSize[0] - 80)) {
return [size.viewSize[0] - 80, '50%'];
}
return [point[0] - 30, '50%'];
},
formatter: '{b}月: {c}',
};
tmpOption.grid = {
top: 55,
left: '-8%',
right: '5%',
bottom: '2%',
containLabel: true,
};
tmpOption.xAxis = [{
show: false,
type: 'category',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#475669',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#E3E9EF'],
},
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
}];
tmpOption.yAxis = [{
show: false,
type: 'value',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#475669',
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
splitLine: {
lineStyle: {
color: ['#E3E9EF'],
},
},
}];
tmpOption.series = [{
name: '日访问量',
type: 'line',
smooth: true,
// symbol: 'circle',
symbolSize: 6,
showSymbol: true,
lineStyle: {
normal: {
width: 2,
},
},
itemStyle: {
normal: {
color: '#0086E6',
borderColor: '#0086E6',
borderWidth: 2,
},
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
}];
this.chartOption = Object.assign({}, this.option, tmpOption);
},
注意：模板中使用的属性设置方法，用的是Object.assign，用方法中的tmpOption属性强制覆盖默认的option属性，传入到组件
this.getChart1Option();
// 调用这个方法后，表格就能展现了
Ao terminar de escrever o código, você felizmente pensa que está pronto e deseja publicá-lo. Acontece que a coletiva de imprensa foi rejeitada porque quando há problemas de formatação no código, ele não pode ser enviado ao servidor.
Então, como resolver o problema do formato do código?
Primeiro use npm execute lint. Não importa o que aconteça, se você executar isso primeiro, eliminará rapidamente muitos problemas de formatação.
Se você descobrir que ainda existem muitos problemas, deverá resolvê-los um por um. A solução é a seguinte
- Há um link na mensagem de erro, como http://eslint.ort/docs/rules/no-var Clique neste link para acessar o site oficial do eslint, descobrir a causa do erro e modificá-lo para. o formato correspondente.
- Se este erro for realmente difícil de corrigir, você poderá bloquear esta especificação. Vá para o arquivo .eslintrc.js no diretório raiz e adicione a proteção de regra correspondente ao objeto de regras, como a regra no-var acima. Configure "no-var": 0 e esta regra será filtrada.
####liberar
npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。
Após o tutorial acima, acredito que você não apenas tenha a capacidade de usar este modelo, mas também tenha entrado no mundo do front-end. Se o documento ainda não estiver claro, ou se você ainda quiser saber quais conhecimentos relevantes precisam ser complementados, entre em contato comigo a qualquer momento ~
