Prefacio
Mi nivel de JavaScript es promedio. Bueno, es bastante promedio. Por lo tanto, es realmente difícil para la última tecnología de marco frontal, pero la realidad me hace enfrentarla. Por lo tanto, aprender es la única salida.
Comparé N Front-End Frames verticalmente y finalmente elegí Vue. ¿Por qué? Las razones son las siguientes:
1.Cangular El futuro es desconocido, 1.x tiene una curva de aprendizaje alta y parece haber sido abandonado, mientras que 2 aún no se ha lanzado oficialmente.
2. React es bastante poderoso, pero no tiene contacto.
3. Vue es simple, y al comenzar, es más adecuado para mi pensamiento y nivel.
4. Vue tiene documentación china, y me veo más cómodo.
Como decidí aprender Vue, la mejor manera de aprender es practicar. Accidentalmente vi que hay una API pública para el foro cnodejs.org, que es muy conveniente. Así que decidí usar esta API pública para escribir una demostración.
Introducción a la interfaz
Esta es la interfaz proporcionada públicamente por cnodeJs.org. Por supuesto, no es solo para nosotros usar para el front-end. Se puede usar en varios programas. La dirección de la interfaz es http://cnodejs.org/api. A través de esta página, el contenido relevante se introduce en detalle.
Las interfaces que proporcionan están completas, lo que significa que podemos crear un foro como ellas a través de estas interfaces.
Plan de proyecto
1. Haga una página de lista que pueda leer el contenido de la lista de CNODEJS.
2. Haga una página de detalles, haga clic en el enlace en la página de la lista e ingrese la página de detalles.
3. Use la tecnología SSI para realizar la reutilización del código HTML. Busque SSI+SHTML para aprender sobre el contenido relacionado.
4. El código CSS se precompila usando SASS.
Directorio de archivos
Página de la lista de renderizado de ININDEX.SHTML
├─Content.shtml Página de detalles de representación
File fragmentado de ├─inc
│ ├─Bar.html Código de barra lateral
│ ├─footer.html parte de copyright del código
│ ├─Head.html El área de la cabeza llama JS y otros códigos
│ └─Header.html Logotipo de encabezado de página y código de navegación
File de recursos de └─RES
├─ Imagen
├─Js
│ ├ ─ Common mi directorio de código
│ │ ├ ├─Common.js Ejecución pública JS
│ └─ Método.js Método personalizado JS
│ ├ ├─Jquery JQuery Directorio de código fuente
│ ├─Plugins Otros directorios de complementos
│ └ ambeine el complemento de paginación de la página de diseño de la página
│ └─Vue Vue Source Directorio
└─ estilo
├─Style.SCSS SASS FUENTE FUENTE
├─Style.css El archivo CSS compilado
├─Base
└─SCSS
Descargue mi archivo fuente https://github.com/fengcms/vue-cnodejsorgtest
Empiece a escribir código
Primero, siga el diseño del directorio de archivos anterior y comience a escribir archivos en él. Res es el directorio de recursos. Puede echarle un vistazo o saber qué es.
De hecho, el punto clave son los archivos index.shtml y content.shtml.
Prepare el archivo HTML de la lista de inicio
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <title> title </title> <link rel = "stylesheet" href = "res/style/style.css"> </head> <body> <sheader> <h1> <a href = "index.html"> Fungleo </a> </h1> <am> <ul> <li> Lista de navegación </li> </ul> </am> </cearer> <section> <section> <ul> <li> <i> <img src = "#avatar url"> <span> username </span> </i> <tiempo> publicado hace 5 días </bear> <a href = " Título </a> </li> </ul> <div> </div> </section> <haz> <h3> Instrucciones en esta página </h3> ... </scante> </section> <footer> Declaración de copyright </footer> <div> </div> </body> </html>
Como se mencionó anteriormente, es la página estática que escribí primero. Junto con mi CSS, el efecto se muestra en la figura a continuación:
Obtenga el código completo de GitHub
Introducir archivos JS como Vue y 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>>
Obtener datos de la interfaz
En primer lugar, pase lo que pase, tenemos que obtener los datos de la interfaz antes de poder continuar haciéndolo. Usamos jQuery para usar el método AJAX para tomar los datos.
El siguiente código:
$ (function () {$ .AJAX ({type: 'get', url: "http://cnodejs.org/api/v1/topics", dataatype: 'json', suctar: function (data) {if (data.success) {console.log (data)} else {json.stringify (data);}, error), ERROR). alerta (json.stringify (data));El código es el anterior. Veamos la consola del navegador y la captura de pantalla es la siguiente:
Como se muestra en la figura anterior, obtuvimos con éxito los datos.
Analizar datos
Como se muestra en la figura anterior, los datos contienen el siguiente contenido
1. Autor
1. URL de avatar del autor
2. Nombre de usuario del autor
2. ID de autor
3. Publicar contenido
4. Tiempo de lanzamiento
5. ¿Es la esencia?
6. Post ID
7. Última hora de respuesta
8. Número de respuestas
9. Etiquetas de atribución
10. Título de la publicación
11. Si debe superarlo
12. Examinar estadísticas
La interfaz de datos es la anterior. Por supuesto, si usted es un foro de función completa, estos datos son útiles. En mi proyecto, muchos de ellos no se usan. Echemos un vistazo a lo que necesito.
<li> <i> <img src = "#avatar url"> <span> nombre de usuario </span> </i> <bear> publicado hace 5 días </beo> <a href = "content.html? ID de enlace"> Publicado Título </a> </li>
Como se muestra en el código anterior, lo que necesitamos incluir el bucle incluye
1. URL de avatar del autor
2. Nombre de usuario del autor
3. Tiempo de lanzamiento
4. Post ID
5. Título de la publicación
No hay problema, todo el contenido e interfaces que necesitamos están disponibles.
Código AJAX encapsular
Aunque el código AJAX no es largo, todavía me siento incómodo. Por lo tanto, uso el siguiente código para encapsularlo
// ajax get get json método función getJson (url, func) {$ .AJAX ({type: 'get', url: url, dataType: 'json', éxito: function (data) {if (data.success) {func (data);} else {alerta ("fallado de interfaz");}, error: function (data) {data) {json.stringify) }});}Como se mencionó anteriormente, cuando sea necesario, solo necesitamos usar la función GetJson (URL, FUNC).
Código encapsulado de referencia
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getJson (url, function (data) {console.log (data);});});Después de modificarlo así, echemos un vistazo y veamos si podemos imprimir los datos que necesitamos. Como se muestra en la figura a continuación:
Sin ningún problema, todavía obtuvimos los datos. Estamos encapsulando la función de devolución de llamada y cambiándola al siguiente código
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getJson (url, pushdom);}); function pushdom (data) {console.log (data);}Ok, si no hay error, los datos de la interfaz definitivamente se pueden imprimir. Después de esta operación, nuestro código será extremadamente conciso y una mayor legibilidad. Lo que debemos hacer a continuación es hacerlo en la función Pushdom (datos).
Código de representación Vue
Primero, debemos usar el método VUE para escribir los datos que queremos insertar en la página.
parte del código HTML
<li v-For = "Info In Data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <time> {{info.create_at}}} </beo> <a href = " }} "> {{info.title}} </a> </li> 1Puntos de conocimiento de Vue
Datos de bucle http://vuejs.org.cn/api/#v-for
Parte del código JS
función pushdom (data) {var vm = new Vue ({el: '.list', data: data});}Echemos un vistazo al efecto:
Ok, muy emocionado. En solo unas pocas líneas de código, presentamos con éxito la lista con Vue.
resumen
1.AJAX es la clave para obtener datos
2. Una vez que comprenda un poco de contenido de Vue, puede comenzar.
3. Al construir un proyecto, el código y los archivos deben ser claros y claros.
apéndice
Sitio web oficial de VUE
Detalles de la API de CNODEJS
Descargue el código fuente de esta serie de tutoriales
Capítulo 1 del tutorial práctico de Vuejs, construyendo los conceptos básicos y presentando la lista
Tutorial práctico de Vuejs Capítulo 2, corrige errores y embellece el tiempo
Tutorial práctico de Vuejs Capítulo 3, utilizando el complemento de diseño para realizar la paginación
Este artículo fue escrito originalmente por Fungleo
Primera dirección de lanzamiento: http://blog.csdn.net/fungleo/article/details/51649074
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.