Prefácio
Meu nível de JavaScript é média. Bem, é bastante médio. Portanto, é realmente um pouco difícil para a mais recente tecnologia de estrutura de front-end, mas a realidade me faz enfrentá-la. Portanto, o aprendizado é a única saída.
Comparei n quadros de front-end verticalmente e finalmente escolhi o Vue. Por que? As razões são as seguintes:
1. Ongular o futuro é desconhecido, 1.x tem uma alta curva de aprendizado e parece ter sido abandonada, enquanto 2 ainda não foi lançado oficialmente.
2. O React é bastante poderoso, mas não tem contato.
3. Vue é simples e, ao começar, é mais adequado para o meu pensamento e nível.
4. Vue tem documentação chinesa, e eu pareço mais confortável.
Desde que decidi aprender Vue, a melhor maneira de aprender é praticar. Eu acidentalmente vi que há uma API pública para o fórum CnodeJs.org, que é tão conveniente. Então eu decidi usar esta API pública para escrever uma demonstração.
Introdução à interface
Esta é a interface fornecida publicamente por cnodejs.org. Obviamente, não é apenas para nós usarmos para o front-end. Pode ser usado em vários programas. O endereço da interface é http://cnodejs.org/api. Através desta página, o conteúdo relevante é introduzido em detalhes.
As interfaces que eles fornecem estão completas, o que significa que podemos criar um fórum como eles através dessas interfaces.
Plano de projeto
1. Faça uma página de lista que possa ler o conteúdo da lista do CNODEJS.
2. Faça uma página de detalhes, clique no link na página da lista e insira a página de detalhes.
3. Use a tecnologia SSI para realizar a reutilização do código HTML. Pesquise SSI+SHTML para aprender sobre o conteúdo relacionado.
4. O código CSS é pré -compilado usando SASS.
Diretório de arquivos
├─ Index.shtml Página da lista de renderização
├─Content.shtml Página de detalhes de renderização
Arquivo Fragmentado por Incentro
│ ├─Bar.html Código da barra lateral
│ ├─Footer.html Copyright parte do código
│ ├—Head.html A área da cabeça chama JS e outros códigos
│ └─Header.html Página logotipo do cabeçalho e código de navegação
Arquivo de recurso RESS
├─Image
├─js
│ ├─ Common My Code Directory
│ │ ├─common.js Execução pública JS JS
│ └─ Método. Js Método Custom JS
Diretório de código -fonte JQuery JQuery
│ ├─ Plugins Outros diretórios de plug -in
│ └— Layout Página de layout Plugin de paginação
│ └─ Vue Vue Código -fonte Diretório
└ -estilo
├─style.scss Sass Source File
├─style.css o arquivo CSS compilado
├─Base
└─Scss
Baixe meu arquivo de origem https://github.com/fengcms/vue-cnodejsorgtest
Comece a escrever o código
Primeiro, siga o design do diretório de arquivos acima e comece a escrever arquivos nele. Res é o diretório de recursos. Você pode dar uma olhada nisso ou saber o que é.
De fato, o ponto principal é o index.shtml e os arquivos content.shtml.
Prepare o arquivo html da lista da página inicial
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <titter> title </title> <link rel = "Stylesheet" href = "res/style/style.css"> </coder> <boder> <h1> <href/style.css "> </body> <boder> <h1> <ahref/ Fungleo </a> </h1> <mav> <ul> <li> Lista de navegação </li> </ul> </mav> </header> <section> <section> <ul> <li> <i> <img src = "#avatar url"> <pla> </span) Título </a> </li> </ul> <div> </div> </section> <fast> <h3> Instruções nesta página </h3> ... </fast> </section> <wower> Declaração de direitos autorais </do Footer> <div> </div> </body> </html>
Como mencionado acima, é a página estática que escrevi primeiro. Em conjunto com o meu CSS, o efeito é mostrado na figura abaixo:
Por favor, obtenha o código completo do github
Introduzir arquivos JS como Vue & JQuery
<script src = "res/js/jQuery/jQuery-2.2.3.min.js"> </script> <script src = "res/js/vue/vue.min.js"> </script> <script src = "res/js/common.js"> </script>
Obtenha dados da interface
Primeiro de tudo, não importa o quê, temos que obter os dados da interface antes que possamos continuar a fazê -lo. Usamos o jQuery para usar o método Ajax para assumir os dados.
O seguinte código:
$ (function () {$ .ajax ({type: 'get', url: "http://cnodejs.org/api/v1/topics", datatype: 'json', success: function (dados) {if (data.success) {console.log (data)} else {aler function (dados) {alert (json.stringify (dados));O código é como acima. Vejamos o console do navegador e a captura de tela é a seguinte:
Como mostrado na figura acima, obtivemos com sucesso os dados.
Analisar dados
Conforme mostrado na figura acima, os dados contêm o seguinte conteúdo
1. Autor
1. URL de avatar do autor
2. Nome de usuário do autor
2. ID do autor
3. Post Conteúdo
4. Tempo de liberação
5. É a essência
6. Post ID
7. Última hora de resposta
8. Número de respostas
9. Tags de atribuição
10. Título do post
11. Seja para o topo
12. Procure estatísticas
A interface de dados é como acima. Obviamente, se você é um fórum de função completa, esses dados são úteis. No meu projeto, muitos deles não são usados. Vamos dar uma olhada no que eu preciso.
<li> <i> <img src = "#avatar url"> <pan> nome de usuário </span> </i> <time> postado 5 dias atrás </time> <a href = "content.html? link id"> título postado </a> </li>
Como mostrado no código acima, o que precisamos fazer o loop inclui
1. URL de avatar do autor
2. Nome de usuário do autor
3. Tempo de liberação
4. Post ID
5. Título do post
Não há problema, todo o conteúdo e interfaces que precisamos estão disponíveis.
Encapsular o código AJAX
Embora o código do Ajax não seja longo, ainda me sinto desconfortável. Portanto, eu uso o seguinte código para encapsulá -lo
// ajax obtém função do método json getjson (url, func) {$ .ajax ({type: 'get', url: url, datatype: 'json', sucess: function (data) {if (data.success) {func (data);} else {alert ("interface falhou"; alerta (json.stringify (dados));Como mencionado acima, quando necessário, precisamos usar apenas a função Getjson (URL, Func).
Código encapsulado de referência
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, function (data) {console.log (data);});});Depois de modificá -lo assim, vamos dar uma olhada e ver se podemos imprimir os dados de que precisamos? Como mostrado na figura abaixo:
Sem problemas, ainda obtivemos os dados. Estamos encapsulando a função de retorno de chamada e alterando -a para o seguinte código
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);}); função pushdom (dados) {console.log (dados);}OK, se não houver erro, os dados da interface podem definitivamente ser impressos. Após esta operação, nosso código será extremamente conciso e aumentou bastante a legibilidade. O que precisamos fazer a seguir é fazê -lo na função Pushdom (dados).
Código de renderização Vue
Primeiro, precisamos usar o método Vue para escrever os dados que queremos inserir na página.
Parte do código HTML
<li v-for = "info em dados"> <i> <img src = "{{info.author.avatar_url}}"> <pan> {{{info.author.loginname}}} </span> </i> <tle> {info.create_at} </time> }} "> {{info.title}} </a> </li> 1Vue Conhecimento pontos
Dados em loop http://vuejs.org.cn/api/#v-for
JS Código Parte
função pushdom (data) {var vm = new vue ({el: '.list', dados: dados});}Vamos dar uma olhada no efeito:
Ok, muito animado. Em apenas algumas linhas de código, renderizamos com sucesso a lista com o Vue.
resumo
1.ajax é a chave para obter dados
2. Depois de entender um pouco do conteúdo do VUE, você pode começar.
3. Ao criar um projeto, o código e os arquivos devem ser claros e claros.
apêndice
Site oficial da VUE
Detalhes da API do CNODEJS
Baixe o código -fonte desta série de tutoriais
Capítulo 1 do tutorial prático de Vuejs, construindo o básico e renderizando a lista
Tutorial prático Vuejs Capítulo 2, corrija erros e embeleza o tempo
Tutorial prático Vuejs Capítulo 3, usando o plug-in de layout para realizar a paginação
Este artigo foi originalmente escrito por Fungleo
Endereço de lançamento: http://blog.csdn.net/fungleo/article/details/51649074
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.